:root {
    --color-fons-app: #eac6c6;
    --color-fons-pell: #ffffff;
    --color-borde: #e3b8b7;
    --color-text-principal: #1f1716;
    --color-text-secundari: #6a514f;
    --color-topbar: #ffffff;
    --color-sidebar: #fdf6f5;
    --color-focus: #be3a34;
    --color-primari: #be3a34;
    --color-primari-fosc: #9f2f2b;
    --color-primari-clar: #f4d6d5;
    --color-superficie-tint: #f9edec;
    --color-ombra-tema: rgba(63, 20, 18, 0.12);
    --alzada-topbar: 72px;
    --amplada-sidebar: 300px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background:
        radial-gradient(circle at 12% 8%, rgba(190, 58, 52, 0.16), transparent 40%),
        radial-gradient(circle at 88% 2%, rgba(234, 198, 198, 0.66), transparent 45%),
        var(--color-fons-app);
    color: var(--color-text-principal);
    font-family: Inter, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

a {
    color: var(--color-primari);
}

.cos-login {
    min-height: 100vh;
    background: #f2f3f5;
}

.pantalla-login {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(320px, 56%) minmax(380px, 44%);
    background: #f2f3f5;
}

.login-imatge {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
}

.login-imatge::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(25, 39, 63, 0.08), rgba(25, 39, 63, 0.08));
    pointer-events: none;
}

.login-imatge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.login-panell {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.5rem, 3.8vw, 3.5rem);
}

.login-panell-contingut {
    width: min(100%, 560px);
}

.login-capcalera {
    margin-bottom: clamp(1rem, 2.6vw, 1.8rem);
}

.login-logo {
    display: block;
    width: min(100%, 490px);
    height: auto;
}

.login-titol {
    margin: 0;
    font-size: clamp(1.15rem, 1.8vw, 1.65rem);
    line-height: 1.2;
    letter-spacing: 0;
    color: #0f2345;
    font-weight: 700;
}

.login-subtitol {
    margin: 0.12rem 0 0.95rem;
    font-size: clamp(0.9rem, 1.2vw, 1.05rem);
    line-height: 1.3;
    color: #374151;
}

.login-alerta {
    border-radius: 12px;
    margin-bottom: 1.2rem;
}

.formulari-login {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.camp-login {
    display: flex;
    flex-direction: column;
    gap: 0.42rem;
}

.fila-etiqueta-login {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.85rem;
}

.formulari-login .form-label {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: #0f2345;
}

.ajuda-login-camp {
    font-size: 0.99rem;
    font-weight: 600;
    color: #338ceb;
}

.formulari-login .form-control {
    height: 56px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: #e6e9ee;
    padding: 0 0.95rem;
    font-size: 1rem;
    color: #112344;
}

.formulari-login .form-control:focus {
    border-color: #6bb0f2;
    background: #edf3fc;
    box-shadow: 0 0 0 0.16rem rgba(53, 141, 233, 0.24);
}

.boto-login.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #3e97ea;
    --bs-btn-border-color: #3e97ea;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #2f84d8;
    --bs-btn-hover-border-color: #2f84d8;
    --bs-btn-active-bg: #2f84d8;
    --bs-btn-active-border-color: #2f84d8;
    --bs-btn-focus-shadow-rgb: 62, 151, 234;
    margin-top: 0.2rem;
    min-width: 210px;
    padding: 0.72rem 1.3rem;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 700;
}

@media (max-width: 1100px) {
    .pantalla-login {
        grid-template-columns: minmax(320px, 50%) minmax(380px, 50%);
    }

    .login-capcalera {
        margin-bottom: 1.15rem;
    }

    .formulari-login .form-control {
        height: 52px;
    }
}

@media (max-width: 900px) {
    .pantalla-login {
        grid-template-columns: 1fr;
    }

    .login-imatge {
        min-height: 260px;
        max-height: 38vh;
    }

    .login-panell {
        align-items: flex-start;
        padding-top: 1.5rem;
        padding-bottom: 2rem;
    }

    .login-logo {
        width: min(100%, 420px);
    }

    .login-titol {
        font-size: clamp(1.05rem, 4.3vw, 1.35rem);
    }

    .login-subtitol {
        font-size: clamp(0.85rem, 3.1vw, 0.98rem);
        margin-bottom: 0.85rem;
    }
}

@media (max-width: 560px) {
    .cos-login {
        background: #f6f7f9;
    }

    .login-imatge {
        min-height: 220px;
        max-height: 32vh;
    }

    .fila-etiqueta-login {
        flex-wrap: wrap;
    }

    .boto-login.btn-primary {
        width: 100%;
        min-width: 0;
    }

    .formulari-login .form-control {
        height: 50px;
    }
}

.app-agenda {
    min-height: 100vh;
}

.barra-superior-agenda {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--alzada-topbar);
    background: var(--color-topbar);
    border-bottom: 1px solid var(--color-borde);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 1rem;
    z-index: 70;
}

.barra-superior-agenda .bloc-esquerra,
.barra-superior-agenda .bloc-dreta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 220px;
}

.barra-superior-agenda .bloc-dreta {
    justify-content: flex-end;
}

.menu-nou {
    position: relative;
}

.menu-nou-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.menu-nou-fletxa {
    font-size: 0.62rem;
    line-height: 1;
}

.menu-nou-opcions {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    min-width: 210px;
    border: 1px solid #d7e2f0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.14);
    padding: 0.32rem;
    display: grid;
    gap: 0.15rem;
    z-index: 80;
}

.menu-nou-opcio {
    border: 0;
    border-radius: 9px;
    background: transparent;
    padding: 0.42rem 0.55rem;
    text-align: left;
    font-size: 0.84rem;
    color: #1e293b;
}

.menu-nou-opcio:hover {
    background: #eff6ff;
    color: #1d4ed8;
}

.barra-superior-agenda .bloc-centre {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.22rem;
}

.barra-superior-agenda .bloc-esquerra-logo {
    justify-content: flex-start;
}

.logo-agenda-enllac {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.logo-agenda-img {
    display: block;
    height: 40px;
    width: auto;
    max-width: 210px;
    object-fit: contain;
}

.fila-centre-controls-data {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
    flex-wrap: wrap;
}

.titol-data-actual {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.fila-centre-controls-data .entrada-mini-data {
    margin-left: 0.1rem;
}

.entrada-mini-data {
    width: 170px;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    padding: 0.35rem 0.5rem;
    font-size: 0.88rem;
    background: #fff;
    text-align: center;
}

.cos-agenda {
    display: flex;
    padding-top: var(--alzada-topbar);
    min-height: 100vh;
}

.barra-lateral-agenda {
    width: var(--amplada-sidebar);
    min-width: var(--amplada-sidebar);
    background: var(--color-sidebar);
    border-right: 1px solid var(--color-borde);
    padding: 1rem;
    overflow: auto;
    position: sticky;
    top: var(--alzada-topbar);
    max-height: calc(100vh - var(--alzada-topbar));
}

.bloc-lateral {
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    background: #fff;
    padding: 0.8rem;
    margin-bottom: 0.8rem;
}

.subtitol-lateral {
    margin: 0 0 0.6rem;
    font-size: 0.92rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #334155;
}

.etiqueta-camp {
    font-size: 0.78rem;
    color: #475569;
    margin-bottom: 0.2rem;
    display: inline-block;
}

.llista-professionals-lateral {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.bloc-autocomplete-lateral {
    margin-bottom: 0.55rem;
}

.bloc-autocomplete-lateral .llista-suggeriments-persones {
    margin-top: 0.25rem;
    max-height: 170px;
}

.item-professional-lateral {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.87rem;
    padding: 0.18rem 0.22rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}

.item-professional-lateral:hover {
    background: #f1f5f9;
}

.item-professional-lateral input[type="checkbox"] {
    accent-color: #2563eb;
}

.avis-professionals-buits {
    margin: 0.35rem 0 0;
    font-size: 0.78rem;
    color: #64748b;
}

.punt-color {
    width: 10px;
    height: 10px;
    border-radius: 99px;
    display: inline-block;
}

.principal-agenda {
    flex: 1;
    padding: 1rem;
    overflow: auto;
}

.blocs-missatges-flash .alert {
    margin-bottom: 0.55rem;
}

.vista-dia-agenda {
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: 12px;
    overflow: auto;
    padding-bottom: 0.5rem;
}

.capsalera-graella-dia,
.cos-graella-dia {
    display: grid;
    grid-template-columns: 80px repeat(var(--columnes-professionals), minmax(260px, 1fr));
    min-width: calc(80px + (var(--columnes-professionals) * 260px));
}

.capsalera-graella-dia {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
    border-bottom: 1px solid var(--color-borde);
}

.capsalera-hora {
    border-right: 1px solid var(--color-borde);
}

.capsalera-professional {
    padding: 0.65rem 0.6rem;
    border-right: 1px solid var(--color-borde);
    font-size: 0.86rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 42px;
}

.columna-hores {
    border-right: 1px solid var(--color-borde);
    background: #fbfdff;
}

.marca-hora {
    font-size: 0.76rem;
    color: #64748b;
    border-bottom: 1px dashed #d8e2ec;
    padding: 0.15rem 0.35rem;
}

.columna-professional-dia {
    border-right: 1px solid var(--color-borde);
    position: relative;
}

.capa-cel-les {
    position: relative;
    z-index: 1;
}

.cel-la-horaria {
    position: absolute;
    left: 0;
    right: 0;
    border: 0;
    border-bottom: 1px dashed #d8e2ec;
    background: transparent;
    cursor: pointer;
}

.cel-la-horaria:hover {
    background: rgba(14, 165, 233, 0.08);
}

.capa-esdeveniments {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.capa-esdeveniments .targeta-esdeveniment {
    pointer-events: auto;
}

.targeta-esdeveniment,
.targeta-setmana {
    border: 1px solid #d8e2ec;
    border-left: 4px solid var(--color-estat, #64748b);
    border-radius: 8px;
    background: linear-gradient(180deg, var(--color-fons-subcategoria, #f3f4f6), #ffffff);
    padding: 0.3rem 0.35rem;
    box-shadow: 0 4px 8px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.targeta-esdeveniment {
    position: absolute;
    cursor: pointer;
}

.rang-hora-targeta {
    font-size: 0.68rem;
    color: #334155;
}

.titol-targeta {
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    margin-top: 0.1rem;
    display: flex;
    align-items: center;
    gap: 0.28rem;
}

.icona-categoria {
    width: 11px;
    height: 11px;
    display: inline-block;
    flex: 0 0 11px;
    border: 1px solid rgba(15, 23, 42, 0.25);
    background: #94a3b8;
    border-radius: 50%;
    vertical-align: middle;
}

.icona-cat-entrevista {
    background: #facc15;
    border-radius: 50%;
}

.icona-cat-reunio {
    background: #8b5cf6;
    border-radius: 2px;
}

.icona-cat-coordinacio {
    background: #ec4899;
    border-radius: 2px;
    transform: rotate(45deg);
}

.icona-cat-permis {
    background: #0ea5e9;
    border: 0;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.icona-cat-treball {
    border-radius: 2px;
    border-color: #334155;
    background: repeating-linear-gradient(90deg, #334155 0 2px, #cbd5e1 2px 4px);
}

.icona-cat-acompanyament {
    background: transparent;
    border: 2px solid #10b981;
}

.icona-cat-domicili {
    background: #f97316;
    border: 0;
    clip-path: polygon(50% 0, 100% 38%, 100% 100%, 0 100%, 0 38%);
}

.icona-cat-franja {
    background: #3b82f6;
    border-color: #1d4ed8;
    box-shadow: inset 0 0 0 2px #ffffff;
}

.icona-cat-general {
    background: #94a3b8;
}

.persona-targeta {
    font-size: 0.68rem;
    color: #475569;
    margin-top: 0.15rem;
}

.vista-setmana-agenda {
    margin-top: 1rem;
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: 12px;
    overflow: auto;
}

.taula-setmana {
    min-width: calc(150px + (var(--columnes-professionals) * 260px));
}

.fila-setmana {
    display: grid;
    grid-template-columns: 150px repeat(var(--columnes-professionals), minmax(260px, 1fr));
    border-bottom: 1px solid var(--color-borde);
}

.fila-setmana.capcalera {
    background: #f8fbff;
    position: sticky;
    top: 0;
    z-index: 10;
}

.cel-dia {
    padding: 0.65rem;
    border-right: 1px solid var(--color-borde);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.84rem;
}

.cel-professional {
    min-height: 100px;
    border-right: 1px solid var(--color-borde);
    padding: 0.45rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.targeta-setmana {
    cursor: pointer;
}

.panell-notes-dia {
    margin-top: 1rem;
    border: 1px solid #dbe5f2;
    border-radius: 14px;
    background: linear-gradient(180deg, #f8fbff 0%, #f2f7fc 100%);
    padding: 0.9rem;
}

.selector-notes-dia {
    max-width: 420px;
    margin-bottom: 0.8rem;
}

#modal-notes-dia .panell-notes-dia {
    margin-top: 0;
    border: 0;
    border-radius: 0;
    padding: 0;
}

#modal-notes-dia .modal__container {
    border-radius: 16px;
    box-shadow: 0 28px 52px rgba(15, 23, 42, 0.28);
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 92vh;
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #e2e8f0;
}

#modal-notes-dia .modal__container::-webkit-scrollbar {
    width: 10px;
}

#modal-notes-dia .modal__container::-webkit-scrollbar-track {
    background: #e2e8f0;
    border-radius: 999px;
}

#modal-notes-dia .modal__container::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%);
    border-radius: 999px;
    border: 2px solid #e2e8f0;
}

#modal-notes-dia .modal__container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #64748b 0%, #475569 100%);
}

.capcalera-notes {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    margin-bottom: 0.6rem;
}

.meta-notes-data {
    margin: 0;
    font-size: 0.82rem;
    color: #64748b;
    font-weight: 600;
}

.bloc-notes-professional {
    border: 1px solid #dbe5f2;
    border-radius: 12px;
    background: #ffffff;
    padding: 0.75rem;
    margin-top: 0.65rem;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

.bloc-notes-professional h3 {
    margin: 0 0 0.6rem;
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.llista-notes-dia {
    display: grid;
    gap: 0.55rem;
}

.formulari-nota {
    margin: 0;
}

.item-nota-dia {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.55rem;
    align-items: start;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.45rem;
    background: #f8fbff;
}

.item-nota-dia--nova {
    background: #ffffff;
}

.item-nota-dia--readonly {
    grid-template-columns: 1fr;
    background: #ffffff;
}

.formulari-nota textarea {
    min-height: 78px;
    border-radius: 9px;
    border-color: #d6e0ec;
}

.formulari-nota textarea:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.15);
}

.accions-nota-dreta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    min-width: 96px;
}

.accions-nota-dreta .btn {
    width: 92px;
}

.formulari-nota-elimina {
    margin: 0;
}

.formulari-nota--nova {
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 1px dashed #d8e2ec;
}

.missatge-notes-buit {
    margin: 0;
    padding: 0.3rem 0.2rem;
    font-size: 0.82rem;
    color: #64748b;
}

.modal__overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.62);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.modal__container {
    background: #fff;
    width: min(760px, 94vw);
    max-height: 90vh;
    overflow: auto;
    border-radius: 12px;
    border: 1px solid var(--color-borde);
}

.modal-gran {
    width: min(920px, 96vw);
}

.modal__header,
.modal__footer {
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid #e2e8f0;
}

.modal__footer {
    border-bottom: 0;
    border-top: 1px solid #e2e8f0;
    display: flex;
    gap: 0.45rem;
    justify-content: flex-end;
}

.modal__content {
    padding: 0.9rem;
}

.modal__title {
    margin: 0;
    font-size: 1rem;
}

.modal__close {
    border: 0;
    background: transparent;
    font-size: 1.2rem;
    cursor: pointer;
}

#modal-nova-activitat .modal__container {
    border-radius: 16px;
    box-shadow: 0 28px 52px rgba(15, 23, 42, 0.28);
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 92vh;
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #e2e8f0;
}

#modal-nova-activitat .modal__container::-webkit-scrollbar {
    width: 10px;
}

#modal-nova-activitat .modal__container::-webkit-scrollbar-track {
    background: #e2e8f0;
    border-radius: 999px;
}

#modal-nova-activitat .modal__container::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%);
    border-radius: 999px;
    border: 2px solid #e2e8f0;
}

#modal-nova-activitat .modal__container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #64748b 0%, #475569 100%);
}

#modal-nova-activitat .modal__header {
    padding: 0.9rem 1rem;
    background:
        radial-gradient(circle at 96% 0%, #dbeafe 0%, transparent 56%),
        linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
    border-bottom: 1px solid #dbe7f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    position: sticky;
    top: 0;
    z-index: 5;
}

#modal-nova-activitat .modal__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
}

#modal-nova-activitat .modal__close {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 999px;
    border: 1px solid #d7e4f5;
    background: #ffffff;
    color: #334155;
}

#modal-nova-activitat .modal__close::before {
    content: "\00d7";
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
}

#modal-nova-activitat .modal__close:hover {
    background: #f8fafc;
    border-color: #c7d2fe;
}

#modal-nova-activitat .modal__content {
    background: linear-gradient(180deg, #f8fbff 0%, #f2f7fc 100%);
    padding: 1rem;
}

#modal-nova-activitat .modal__footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid #dbe7f5;
    background: #ffffff;
    position: sticky;
    bottom: 0;
    z-index: 4;
}

#modal-nova-activitat .formulari-esdeveniment {
    gap: 0.8rem;
}

#modal-nova-activitat .pestanyes-activitat {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
}

#modal-nova-activitat .pestanya-activitat {
    border: 1px solid #d8e2ef;
    border-radius: 10px;
    background: #ffffff;
    color: #475569;
    font-size: 0.77rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-align: center;
    padding: 0.5rem 0.55rem;
}

#modal-nova-activitat .pestanya-activitat:hover {
    background: #f8fafc;
    border-color: #c7d2fe;
}

#modal-nova-activitat .pestanya-activitat:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.2);
}

#modal-nova-activitat .pestanya-activitat.es-activa {
    background: linear-gradient(180deg, #eef2ff 0%, #f8faff 100%);
    border-color: #6366f1;
    color: #312e81;
    box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.18);
}

#modal-nova-activitat .panells-pestanyes-activitat {
    display: grid;
    gap: 0.8rem;
}

#modal-nova-activitat .panell-pestanya-activitat {
    display: grid;
    gap: 0.8rem;
}

#modal-nova-activitat .panell-pestanya-activitat[hidden] {
    display: none !important;
}

#modal-nova-activitat .targeta-seccio-activitat {
    border: 1px solid #dbe5f2;
    border-radius: 14px;
    background: #ffffff;
    padding: 0.75rem;
    display: grid;
    gap: 0.6rem;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

#modal-nova-activitat .titol-seccio-activitat {
    margin: 0;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: #334155;
}

#modal-nova-activitat .fila-formulari {
    display: grid;
    gap: 0.28rem;
}

#modal-nova-activitat .fila-cerca-persona-creacio {
    display: grid;
    grid-template-columns: minmax(260px, 520px) auto;
    gap: 0.5rem;
    align-items: start;
}

#modal-nova-activitat .bloc-autocomplete-persona {
    width: 100%;
}

#modal-nova-activitat .fila-formulari--professionals-convidats {
    margin-top: 0.75rem;
}

#modal-nova-activitat .etiqueta-camp {
    margin-bottom: 0.05rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.7rem;
    font-weight: 700;
    color: #475569;
}

#modal-nova-activitat .form-control,
#modal-nova-activitat .form-select {
    min-height: 40px;
    border-radius: 10px;
    border-color: #d6e0ec;
    background: #ffffff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#modal-nova-activitat .form-control:focus,
#modal-nova-activitat .form-select:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.15);
}

#modal-nova-activitat textarea.form-control {
    min-height: 78px;
    resize: vertical;
}

#modal-nova-activitat .fila-checks {
    gap: 0.55rem;
}

#modal-nova-activitat .fila-checks label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid #d8e2ef;
    border-radius: 999px;
    background: #f8fafc;
    padding: 0.34rem 0.66rem;
    font-size: 0.8rem;
}

#modal-nova-activitat .fila-checks label:hover {
    border-color: #c7d2fe;
    background: #eef2ff;
}

#modal-nova-activitat .fila-checks input[type="checkbox"] {
    accent-color: #4f46e5;
}

#modal-nova-activitat .fila-durada-rapida {
    display: grid;
    gap: 0.28rem;
}

#modal-nova-activitat .etiqueta-camp-durada {
    margin-bottom: 0;
}

#modal-nova-activitat .grup-durada-rapida {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #aebfd4;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    width: fit-content;
    max-width: 100%;
}

#modal-nova-activitat .boto-durada-rapida {
    border: 0;
    border-right: 1px solid #d5deea;
    background: #ffffff;
    color: #475569;
    font-size: 0.83rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.52rem 0.72rem;
}

#modal-nova-activitat .boto-durada-rapida:last-child {
    border-right: 0;
}

#modal-nova-activitat .boto-durada-rapida:hover {
    background: #eff6ff;
    color: #1d4ed8;
}

#modal-nova-activitat .boto-crear-persona-modal {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    width: fit-content;
    max-width: 100%;
    gap: 0.42rem;
    border: 1px solid #3b82f6;
    border-radius: 10px;
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
    padding: 0.42rem 0.76rem;
    box-shadow: 0 7px 14px rgba(37, 99, 235, 0.28);
}

#modal-nova-activitat .boto-crear-persona-modal:hover {
    color: #ffffff;
    filter: brightness(1.02);
}

#modal-nova-activitat .icona-boto-crear-persona {
    position: relative;
    width: 15px;
    height: 15px;
    display: inline-block;
}

#modal-nova-activitat .icona-boto-crear-persona::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0;
    width: 6px;
    height: 6px;
    border: 2px solid rgba(255, 255, 255, 0.95);
    border-radius: 50%;
}

#modal-nova-activitat .icona-boto-crear-persona::after {
    content: "";
    position: absolute;
    left: 2px;
    bottom: 0;
    width: 10px;
    height: 6px;
    border: 2px solid rgba(255, 255, 255, 0.95);
    border-top: 0;
    border-radius: 0 0 8px 8px;
}

#modal-nova-activitat .signe-plus-persona {
    position: absolute;
    right: -2px;
    top: -1px;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
}

#modal-nova-activitat .llista-suggeriments-persones {
    border-color: #d8e2ef;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.09);
}

.formulari-esdeveniment {
    display: grid;
    gap: 0.6rem;
}

.fila-formulari--titol-destacat {
    border: 1px solid #c7d2fe;
    border-radius: 12px;
    background: linear-gradient(180deg, #eef2ff 0%, #f8faff 100%);
    padding: 0.65rem;
}

.etiqueta-camp--forta {
    font-weight: 700;
    color: #312e81;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.entrada-titol-destacada {
    border-width: 2px;
    border-color: #c7d2fe;
    font-weight: 600;
}

.entrada-titol-destacada:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.18);
}

.fila-formulari.doble {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
}

.fila-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.85rem;
}

.bloc-autocomplete {
    position: relative;
}

.persones-seleccionades {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0 0 0.35rem;
}

.professionals-seleccionats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0 0 0.35rem;
}

.petit-persones-seleccionades {
    font-size: 0.78rem;
}

.xip-persona-seleccionada {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    padding: 0.18rem 0.5rem;
    font-size: 0.78rem;
    color: #1e3a8a;
}

.xip-professional-seleccionat {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #ecfeff;
    border: 1px solid #a5f3fc;
    border-radius: 999px;
    padding: 0.18rem 0.5rem;
    font-size: 0.78rem;
    color: #155e75;
}

.boto-elimina-xip {
    border: 0;
    background: transparent;
    color: #1e40af;
    font-weight: 700;
    padding: 0;
    line-height: 1;
    cursor: pointer;
}

.boto-elimina-xip:hover {
    color: #dc2626;
}

.boto-elimina-xip-professional {
    border: 0;
    background: transparent;
    color: #0e7490;
    font-weight: 700;
    padding: 0;
    line-height: 1;
    cursor: pointer;
}

.boto-elimina-xip-professional:hover {
    color: #dc2626;
}

.llista-suggeriments-persones {
    list-style: none;
    margin: 0.15rem 0 0;
    padding: 0;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    background: #fff;
    max-height: 190px;
    overflow: auto;
}

.item-suggeriment {
    padding: 0.35rem 0.5rem;
    cursor: pointer;
    font-size: 0.85rem;
}

.item-suggeriment:hover {
    background: #eff6ff;
}

.item-suggeriment-seccio {
    cursor: default;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding-top: 0.45rem;
    padding-bottom: 0.2rem;
}

.item-suggeriment-seccio:hover {
    background: transparent;
}

.item-suggeriment-activitat {
    display: grid;
    gap: 0.08rem;
}

.item-suggeriment-titol {
    font-weight: 600;
    line-height: 1.2;
}

.item-suggeriment-meta {
    font-size: 0.74rem;
    line-height: 1.2;
}

.enllac-crear-persona {
    font-size: 0.78rem;
    margin-top: 0.2rem;
    display: inline-block;
}

.ajuda-tipus-activitat {
    display: block;
    margin-top: 0.28rem;
    font-size: 0.72rem;
    color: #64748b;
}

.detall-esdeveniment h3 {
    margin: 0;
}

.dades-detall-esdeveniment {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 0.3rem 0.7rem;
    margin: 0.8rem 0;
}

.dades-detall-esdeveniment dt {
    font-weight: 600;
}

.dades-detall-esdeveniment dd {
    margin: 0;
}

.llista-persones-detall {
    margin: 0;
    padding-left: 1rem;
}

.accions-detall-esdeveniment {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.llista-solapes ul {
    margin: 0.5rem 0 0;
    padding-left: 1rem;
}

.llista-solapes li {
    margin-bottom: 0.45rem;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

.modal-persona-rapida {
    width: min(980px, 97vw);
    max-height: 92vh;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #e2e8f0;
}

.modal-persona-rapida::-webkit-scrollbar {
    width: 10px;
}

.modal-persona-rapida::-webkit-scrollbar-track {
    background: #e2e8f0;
    border-radius: 999px;
}

.modal-persona-rapida::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%);
    border-radius: 999px;
    border: 2px solid #e2e8f0;
}

.modal-persona-rapida::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #64748b 0%, #475569 100%);
}

.modal__header--persona {
    background:
        radial-gradient(circle at 95% 0%, #dbeafe 0%, transparent 52%),
        linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.kicker-persona--modal {
    margin-bottom: 0.2rem;
}

.subtitol-capcalera-persona--modal {
    margin-top: 0.3rem;
    font-size: 0.82rem;
}

.modal__content--persona {
    padding-top: 0.75rem;
}

.formulari-persona--modal {
    gap: 0.75rem;
}

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

.pestanya-persona {
    border: 1px solid var(--color-border-suau, #d8e2ef);
    border-radius: 10px;
    background: #ffffff;
    color: var(--color-text-secundari, #475569);
    font-size: 0.77rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-align: center;
    padding: 0.5rem 0.55rem;
}

.pestanya-persona:hover {
    border-color: var(--color-border-fort, #c7d2fe);
    background: var(--color-superficie-alt, #f8fafc);
}

.pestanya-persona:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(190, 58, 52, 0.16);
}

.pestanya-persona.es-activa {
    border-color: var(--color-primari, #be3a34);
    color: var(--color-primari-fosc, #9f2f2b);
    background: linear-gradient(180deg, var(--color-superficie-tint, #f4d6d5) 0%, #fff9f8 100%);
    box-shadow: inset 0 0 0 1px rgba(190, 58, 52, 0.14);
}

.panell-pestanya-persona[hidden] {
    display: none !important;
}

.graella-panell-persona {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 0.8rem;
}

.graella-panell-persona .col-span-2 {
    grid-column: 1 / -1;
}

.bloc-adreca-persona--modal {
    margin-top: 0;
}

.modal__footer--persona {
    justify-content: space-between;
}

.pantalla-persona {
    max-width: 1000px;
    margin: 0 auto;
    padding: 1rem;
}

.pantalla-persona--nova {
    max-width: 1140px;
}

.capcalera-persona {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.capcalera-persona h1 {
    margin: 0;
}

.capcalera-persona--nova {
    padding: 1.15rem 1.2rem;
    border: 1px solid #dbe7f6;
    border-radius: 16px;
    background:
        radial-gradient(circle at 90% 0%, #dbeafe 0%, transparent 44%),
        linear-gradient(180deg, #f7fbff 0%, #eef4fb 100%);
}

.kicker-persona {
    margin: 0 0 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: 0.72rem;
    color: #1d4ed8;
    font-weight: 700;
}

.subtitol-capcalera-persona {
    margin: 0.35rem 0 0;
    color: #475569;
}

.targeta-info-persona {
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: 12px;
    padding: 1rem;
    margin-top: 1rem;
}

.targeta-formulari-persona {
    border: 1px solid #d9e3ef;
    border-radius: 16px;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
    background:
        linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.alerta-formulari-persona {
    margin-top: 1rem;
}

.fila-dades-persona {
    padding: 0.3rem 0;
    border-bottom: 1px dashed #d8e2ec;
}

.fila-dades-persona:last-child {
    border-bottom: 0;
}

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

.formulari-persona--nova {
    gap: 0.95rem;
}

.formulari-persona--nova .form-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #334155;
}

.formulari-persona--nova .form-control,
.formulari-persona--nova .form-select {
    border-radius: 10px;
    border-color: #d6e0ec;
    min-height: 42px;
}

.formulari-persona--nova .form-control:focus,
.formulari-persona--nova .form-select:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.18);
}

.franja-ajuda-obligatoris {
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1e3a8a;
    border-radius: 12px;
    padding: 0.65rem 0.75rem;
    font-size: 0.86rem;
}

.ajuda-camp {
    display: block;
    margin-top: 0.25rem;
    color: #64748b;
    font-size: 0.75rem;
}

.bloc-adreca-persona {
    border: 1px solid #d8e7fb;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
    border-radius: 14px;
    margin-top: 0.4rem;
    padding: 0.9rem;
}

.subtitol-adreca-persona {
    font-size: 0.98rem;
    margin: 0 0 0.7rem;
    color: #1e3a8a;
}

.fila-adreca-principal {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 0.8rem;
    margin-bottom: 0.75rem;
}

.fila-adreca-complements {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.8rem;
    margin-bottom: 0.75rem;
}

.fila-adreca-final {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 0.8rem;
}

.fila-accions-formulari-persona {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.45rem;
}

.formulari-persona .col-span-2 {
    grid-column: 1 / -1;
}

.llista-activitats-persona {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.llista-activitats-persona li {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.5rem;
    display: grid;
    gap: 0.2rem;
}

.micromodal-slide[aria-hidden="true"] {
    display: none;
}

.micromodal-slide[aria-hidden="false"] {
    display: block;
}

.barra-superior-franges .subtitol-franges {
    margin: 0.2rem 0 0;
    font-size: 0.78rem;
    color: #64748b;
}

.principal-franges {
    display: grid;
    gap: 0.85rem;
    align-content: start;
}

.petit-text-franges {
    font-size: 0.8rem;
    line-height: 1.4;
}

.targeta-formulari-franges,
.targeta-llista-franges {
    border: 1px solid #d7e2ef;
    border-radius: 14px;
    background: #ffffff;
    padding: 0.9rem;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

.titol-targeta-franges {
    margin: 0;
    font-size: 1rem;
}

.subtitol-targeta-franges {
    margin: 0.28rem 0 0.85rem;
    color: #64748b;
    font-size: 0.83rem;
}

.formulari-franges {
    display: grid;
    gap: 0.65rem;
}

.fila-accions-franges {
    display: flex;
    justify-content: flex-end;
}

.llista-franges-lliures {
    display: grid;
    gap: 0.55rem;
}

.item-franja-lliure {
    border: 1px solid #e2e8f0;
    border-left: 4px solid #3b82f6;
    border-radius: 10px;
    padding: 0.6rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.6rem;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.item-franja-lliure-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.83rem;
    color: #1e293b;
}

.item-franja-lliure-text {
    display: grid;
    gap: 0.2rem;
}

.item-franja-lliure-titol {
    font-weight: 700;
    font-size: 0.86rem;
    color: #1e293b;
}

.item-franja-lliure-comentari {
    font-size: 0.8rem;
    color: #475569;
}

.item-franja-lliure-accions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.item-franja-lliure-accions form {
    margin: 0;
}

.principal-usuaris {
    padding-top: calc(var(--alzada-topbar) + 1rem);
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    gap: 0.9rem;
    align-content: start;
}

.gestor-usuaris-admin {
    display: grid;
    gap: 0.9rem;
}

.targeta-usuaris {
    border: 1px solid #d7e2ef;
    border-radius: 14px;
    background: #ffffff;
    padding: 0.9rem;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

.capsalera-gestor-usuaris {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1rem;
    align-items: end;
}

.resum-usuaris-admin {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.pastilla-resum-usuaris {
    display: inline-flex;
    align-items: center;
    border: 1px solid #dbe7f6;
    border-radius: 999px;
    background: #f8fbff;
    color: #1e3a8a;
    font-size: 0.76rem;
    font-weight: 600;
    padding: 0.22rem 0.6rem;
}

.bloc-cerca-usuaris-admin {
    justify-self: end;
    width: 100%;
    max-width: 320px;
}

.formulari-cerca-usuaris-admin {
    width: 100%;
}

.fila-cerca-usuaris-admin {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.fila-cerca-usuaris-admin .form-control {
    min-height: 40px;
}

.desplegable-alta-usuari {
    overflow: hidden;
}

.resum-desplegable-alta {
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 700;
    color: #1e3a8a;
    list-style: none;
    user-select: none;
}

.resum-desplegable-alta::-webkit-details-marker {
    display: none;
}

.resum-desplegable-alta::after {
    content: "Mostra formulari";
    margin-left: 0.55rem;
    font-size: 0.74rem;
    font-weight: 500;
    color: #64748b;
}

.desplegable-alta-usuari[open] .resum-desplegable-alta::after {
    content: "Amaga formulari";
}

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

.formulari-usuari-admin--alta {
    padding-top: 0.2rem;
}

.formulari-usuari-admin .form-control,
.formulari-usuari-admin .form-select {
    min-height: 40px;
}

.formulari-usuari-admin .col-span-2 {
    grid-column: 1 / -1;
}

.camp-actiu-usuari {
    display: flex;
    align-items: flex-end;
    font-size: 0.86rem;
}

.fila-accions-usuaris {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    padding-top: 0.25rem;
    gap: 0.35rem;
}

.capsalera-llista-usuaris-admin {
    margin-bottom: 0.65rem;
}

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

.missatge-sense-resultats-usuaris {
    margin: 0 0 0.7rem;
    font-size: 0.84rem;
    color: #64748b;
}

.registre-usuari-admin {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.75rem;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.capsalera-registre-usuari {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}

.identitat-registre-usuari {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.insignia-registre-usuari {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 0.84rem;
    font-weight: 700;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.22);
}

.titol-registre-usuari {
    margin: 0;
    font-size: 0.95rem;
    color: #0f172a;
}

.meta-registre-usuari {
    margin: 0.1rem 0 0;
    font-size: 0.78rem;
    color: #64748b;
}

.estat-registre-usuari {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.36rem;
}

.navegacio-paginacio-usuaris {
    margin-top: 0.85rem;
    padding-top: 0.8rem;
    border-top: 1px dashed #dbe5f2;
}

.paginacio-usuaris {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.paginacio-usuaris a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 34px;
    border: 1px solid #d8e2ef;
    border-radius: 9px;
    background: #ffffff;
    color: #334155;
    text-decoration: none;
    font-size: 0.82rem;
    padding: 0 0.55rem;
}

.paginacio-usuaris a:hover {
    border-color: #93c5fd;
    background: #eff6ff;
}

.paginacio-usuaris a.activa {
    background: #2563eb;
    border-color: #1d4ed8;
    color: #ffffff;
    font-weight: 700;
}

.formulari-usuari-admin--modal {
    grid-template-columns: 1fr;
    gap: 0.6rem;
}

.petit-text-modal {
    font-size: 0.78rem;
}

.formulari-usuari-admin--edicio {
    margin-top: 0.7rem;
    padding-top: 0.75rem;
    border-top: 1px dashed #d8e2ec;
}

.formulari-usuari-admin--edicio[hidden] {
    display: none !important;
}

.fila-accions-usuaris--edicio {
    border-top: 1px dashed #dbe5f2;
    margin-top: 0.25rem;
    padding-top: 0.6rem;
}

@media (max-width: 1100px) {
    .barra-lateral-agenda {
        width: 250px;
        min-width: 250px;
    }
}

@media (max-width: 920px) {
    :root {
        --alzada-topbar: 118px;
    }

    .barra-superior-agenda {
        flex-wrap: wrap;
        align-content: center;
        height: auto;
    }

    .barra-superior-agenda .bloc-esquerra,
    .barra-superior-agenda .bloc-dreta {
        min-width: auto;
    }

    .logo-agenda-img {
        height: 34px;
        max-width: 170px;
    }

    .cos-agenda {
        flex-direction: column;
    }

    .formulari-persona--modal {
        grid-template-columns: 1fr;
    }

    .formulari-persona--modal .col-span-2 {
        grid-column: 1;
    }

    .pestanyes-persona {
        grid-template-columns: 1fr;
    }

    .graella-panell-persona {
        grid-template-columns: 1fr;
    }

    .graella-panell-persona .col-span-2 {
        grid-column: 1;
    }

    .formulari-persona--modal .fila-adreca-principal,
    .formulari-persona--modal .fila-adreca-complements,
    .formulari-persona--modal .fila-adreca-final {
        grid-template-columns: 1fr;
    }

    .barra-lateral-agenda {
        position: static;
        width: auto;
        min-width: auto;
        max-height: none;
        border-right: 0;
        border-bottom: 1px solid var(--color-borde);
    }

    .formulari-persona,
    .fila-formulari.doble,
    .dades-detall-esdeveniment {
        grid-template-columns: 1fr;
    }

    #modal-nova-activitat .fila-cerca-persona-creacio {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }

    #modal-nova-activitat .pestanyes-activitat {
        grid-template-columns: 1fr;
    }

    .item-nota-dia {
        grid-template-columns: 1fr;
    }

    .item-franja-lliure {
        grid-template-columns: 1fr;
    }

    .formulari-usuari-admin {
        grid-template-columns: 1fr;
    }

    .capsalera-gestor-usuaris {
        grid-template-columns: 1fr;
    }

    .bloc-cerca-usuaris-admin {
        max-width: 100%;
        justify-self: stretch;
    }

    .fila-cerca-usuaris-admin {
        flex-wrap: wrap;
    }

    .fila-cerca-usuaris-admin .btn {
        width: auto;
    }

    .accions-nota-dreta {
        flex-direction: row;
        justify-content: flex-end;
        width: 100%;
    }

    .accions-nota-dreta .btn {
        width: auto;
    }

    .fila-adreca-principal,
    .fila-adreca-complements,
    .fila-adreca-final {
        grid-template-columns: 1fr;
    }
}

/* Theme overrides aligned with organization palette */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--color-primari);
    --bs-btn-border-color: var(--color-primari);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--color-primari-fosc);
    --bs-btn-hover-border-color: var(--color-primari-fosc);
    --bs-btn-active-bg: var(--color-primari-fosc);
    --bs-btn-active-border-color: var(--color-primari-fosc);
    --bs-btn-focus-shadow-rgb: 190, 58, 52;
}

.btn-outline-primary {
    --bs-btn-color: var(--color-primari);
    --bs-btn-border-color: var(--color-primari);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--color-primari);
    --bs-btn-hover-border-color: var(--color-primari);
    --bs-btn-active-bg: var(--color-primari-fosc);
    --bs-btn-active-border-color: var(--color-primari-fosc);
    --bs-btn-focus-shadow-rgb: 190, 58, 52;
}

.btn-link {
    color: var(--color-primari);
}

.text-bg-primary {
    background-color: var(--color-primari) !important;
}

.menu-nou-opcions {
    border-color: var(--color-borde);
    box-shadow: 0 12px 24px var(--color-ombra-tema);
}

.menu-nou-opcio:hover {
    background: var(--color-superficie-tint);
    color: var(--color-primari-fosc);
}

.entrada-mini-data:focus,
.form-control:focus,
.form-select:focus {
    border-color: var(--color-primari);
    box-shadow: 0 0 0 0.2rem rgba(190, 58, 52, 0.16);
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--color-primari);
}

.bloc-lateral,
.targeta-login,
.targeta-usuaris,
.targeta-info-persona,
.targeta-formulari-franges,
.targeta-llista-franges {
    box-shadow: 0 12px 24px var(--color-ombra-tema);
}

.pastilla-resum-usuaris {
    border-color: var(--color-borde);
    background: var(--color-superficie-tint);
    color: var(--color-primari-fosc);
}

#modal-nova-activitat .modal__header,
.modal__header--persona {
    background:
        radial-gradient(circle at 95% 0%, rgba(234, 198, 198, 0.65) 0%, transparent 52%),
        linear-gradient(180deg, #fff8f7 0%, #f9edec 100%);
    border-bottom-color: var(--color-borde);
}

#modal-nova-activitat .boto-durada-rapida {
    border-color: var(--color-borde);
    color: var(--color-text-secundari);
}

#modal-nova-activitat .boto-durada-rapida:hover {
    border-color: var(--color-primari);
    background: var(--color-superficie-tint);
    color: var(--color-primari-fosc);
}

.paginacio-usuaris a:hover {
    border-color: var(--color-borde);
    background: var(--color-superficie-tint);
}

.paginacio-usuaris a.activa {
    background: var(--color-primari);
    border-color: var(--color-primari-fosc);
}

/* Extended theme overrides to remove remaining blue accents */
:root {
    --color-superficie-alt: #fff8f7;
    --color-superficie-alt-2: #fdf1f0;
    --color-border-suau: #e8c5c4;
    --color-border-fort: #dca3a1;
    --color-ombra-forta: rgba(63, 20, 18, 0.2);
    --color-overlay-fosc: rgba(35, 14, 13, 0.6);
    --color-scroll-track: #f2dcdb;
    --color-scroll-thumb-top: #d68a87;
    --color-scroll-thumb-bottom: #be3a34;
}

.columna-hores,
.fila-setmana.capcalera {
    background: var(--color-superficie-alt);
}

.marca-hora,
.ajuda-camp,
.meta-notes-data,
.missatge-notes-buit,
.ajuda-tipus-activitat,
.subtitol-capcalera-persona,
.subtitol-targeta-franges,
.barra-superior-franges .subtitol-franges,
.meta-registre-usuari,
.missatge-sense-resultats-usuaris,
.item-franja-lliure-comentari {
    color: var(--color-text-secundari);
}

.item-professional-lateral {
    border-color: var(--color-border-suau);
    background: var(--color-superficie-alt);
}

.item-professional-lateral:hover {
    background: var(--color-superficie-tint);
}

.item-professional-lateral input[type="checkbox"] {
    accent-color: var(--color-primari);
}

.marca-hora,
.cel-la-horaria,
.fila-dades-persona {
    border-bottom-color: var(--color-border-suau);
}

.cel-la-horaria:hover {
    background: rgba(190, 58, 52, 0.1);
}

.targeta-esdeveniment,
.targeta-setmana {
    border: 1px solid var(--color-border-suau);
    border-left: 4px solid var(--color-estat, #64748b);
    background: linear-gradient(180deg, var(--color-fons-subcategoria, #f3f4f6), #ffffff);
    box-shadow: 0 4px 8px var(--color-ombra-tema);
}

.rang-hora-targeta,
.persona-targeta {
    color: var(--color-text-secundari);
}

.icona-categoria {
    border-color: rgba(63, 20, 18, 0.28);
}

.icona-cat-franja {
    background: var(--color-primari);
    border-color: var(--color-primari-fosc);
}

.icona-cat-general {
    background: #b98e8c;
}

.panell-notes-dia,
.bloc-notes-professional,
.item-nota-dia,
#modal-nova-activitat .targeta-seccio-activitat,
.targeta-formulari-persona,
.targeta-formulari-franges,
.targeta-llista-franges,
.targeta-usuaris {
    border-color: var(--color-border-suau);
    box-shadow: 0 10px 22px var(--color-ombra-tema);
}

.panell-notes-dia,
#modal-nova-activitat .modal__content,
.bloc-adreca-persona,
.item-franja-lliure,
.registre-usuari-admin {
    background: linear-gradient(180deg, var(--color-superficie-alt) 0%, #ffffff 100%);
}

.item-nota-dia {
    background: var(--color-superficie-alt);
}

.item-nota-dia--nova,
.item-nota-dia--readonly {
    background: #ffffff;
}

.formulari-nota textarea,
#modal-nova-activitat .form-control,
#modal-nova-activitat .form-select,
.formulari-persona--nova .form-control,
.formulari-persona--nova .form-select,
.entrada-titol-destacada {
    border-color: var(--color-border-suau);
}

.formulari-nota textarea:focus,
#modal-nova-activitat .form-control:focus,
#modal-nova-activitat .form-select:focus,
.formulari-persona--nova .form-control:focus,
.formulari-persona--nova .form-select:focus,
.entrada-titol-destacada:focus {
    border-color: var(--color-primari);
    box-shadow: 0 0 0 0.2rem rgba(190, 58, 52, 0.16);
}

.modal__overlay {
    background: var(--color-overlay-fosc);
}

.modal__header,
.modal__footer {
    border-color: var(--color-border-suau);
}

#modal-notes-dia .modal__container,
#modal-nova-activitat .modal__container,
.modal-persona-rapida {
    box-shadow: 0 24px 48px var(--color-ombra-forta);
    scrollbar-color: var(--color-scroll-thumb-bottom) var(--color-scroll-track);
}

#modal-notes-dia .modal__container::-webkit-scrollbar-track,
#modal-nova-activitat .modal__container::-webkit-scrollbar-track,
.modal-persona-rapida::-webkit-scrollbar-track {
    background: var(--color-scroll-track);
}

#modal-notes-dia .modal__container::-webkit-scrollbar-thumb,
#modal-nova-activitat .modal__container::-webkit-scrollbar-thumb,
.modal-persona-rapida::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--color-scroll-thumb-top) 0%, var(--color-scroll-thumb-bottom) 100%);
    border: 2px solid var(--color-scroll-track);
}

#modal-notes-dia .modal__container::-webkit-scrollbar-thumb:hover,
#modal-nova-activitat .modal__container::-webkit-scrollbar-thumb:hover,
.modal-persona-rapida::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--color-primari) 0%, var(--color-primari-fosc) 100%);
}

#modal-nova-activitat .modal__title,
.modal__title,
.titol-registre-usuari,
.item-franja-lliure-meta,
.item-franja-lliure-titol,
.titol-targeta-franges,
#modal-nova-activitat .titol-seccio-activitat,
.formulari-persona--nova .form-label {
    color: var(--color-text-principal);
}

#modal-nova-activitat .etiqueta-camp,
.etiqueta-camp--forta {
    color: var(--color-primari-fosc);
}

#modal-nova-activitat .modal__close {
    border-color: var(--color-border-suau);
    background: #ffffff;
    color: var(--color-text-secundari);
}

#modal-nova-activitat .modal__close:hover {
    background: var(--color-superficie-alt);
    border-color: var(--color-border-fort);
}

#modal-nova-activitat .fila-checks label {
    border-color: var(--color-border-suau);
    background: var(--color-superficie-alt);
}

#modal-nova-activitat .fila-checks label:hover {
    border-color: var(--color-border-fort);
    background: var(--color-superficie-tint);
}

#modal-nova-activitat .fila-checks input[type="checkbox"] {
    accent-color: var(--color-primari);
}

#modal-nova-activitat .grup-durada-rapida {
    border-color: var(--color-border-fort);
}

#modal-nova-activitat .boto-durada-rapida {
    border-right-color: var(--color-border-suau);
    background: #ffffff;
    color: var(--color-text-secundari);
}

#modal-nova-activitat .boto-durada-rapida:hover {
    border-color: var(--color-border-fort);
    background: var(--color-superficie-tint);
    color: var(--color-primari-fosc);
}

#modal-nova-activitat .pestanya-activitat {
    border-color: var(--color-border-suau);
    color: var(--color-text-secundari);
}

#modal-nova-activitat .pestanya-activitat:hover {
    border-color: var(--color-border-fort);
    background: var(--color-superficie-alt);
}

#modal-nova-activitat .pestanya-activitat:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(190, 58, 52, 0.16);
}

#modal-nova-activitat .pestanya-activitat.es-activa {
    border-color: var(--color-primari);
    color: var(--color-primari-fosc);
    background: linear-gradient(180deg, var(--color-superficie-tint) 0%, #fff9f8 100%);
    box-shadow: inset 0 0 0 1px rgba(190, 58, 52, 0.14);
}

#modal-nova-activitat .boto-crear-persona-modal {
    border-color: var(--color-primari-fosc);
    background: linear-gradient(180deg, var(--color-primari) 0%, var(--color-primari-fosc) 100%);
    box-shadow: 0 7px 14px rgba(190, 58, 52, 0.28);
}

#modal-nova-activitat .llista-suggeriments-persones {
    border-color: var(--color-border-suau);
    box-shadow: 0 8px 18px var(--color-ombra-tema);
}

#modal-nova-activitat .llista-suggeriments-persones:empty {
    display: none;
}

.fila-formulari--titol-destacat {
    border-color: var(--color-border-suau);
    background: linear-gradient(180deg, var(--color-superficie-tint) 0%, #ffffff 100%);
}

.xip-persona-seleccionada,
.xip-professional-seleccionat {
    background: var(--color-superficie-tint);
    border-color: var(--color-border-suau);
    color: var(--color-primari-fosc);
}

.boto-elimina-xip,
.boto-elimina-xip-professional {
    color: var(--color-primari);
}

.boto-elimina-xip:hover,
.boto-elimina-xip-professional:hover {
    color: var(--color-primari-fosc);
}

.item-suggeriment:hover {
    background: var(--color-superficie-tint);
}

.item-suggeriment-seccio:hover {
    background: transparent;
}

.capcalera-persona--nova {
    border-color: var(--color-border-suau);
    background:
        radial-gradient(circle at 90% 0%, rgba(234, 198, 198, 0.68) 0%, transparent 44%),
        linear-gradient(180deg, #fff8f7 0%, #f9edec 100%);
}

.kicker-persona,
.subtitol-adreca-persona,
.resum-desplegable-alta {
    color: var(--color-primari-fosc);
}

.franja-ajuda-obligatoris {
    border-color: var(--color-border-fort);
    background: var(--color-superficie-tint);
    color: var(--color-primari-fosc);
}

.bloc-adreca-persona,
.llista-activitats-persona li,
.item-franja-lliure {
    border-color: var(--color-border-suau);
}

.item-franja-lliure {
    border-left-color: var(--color-primari);
}

.resum-desplegable-alta::after {
    color: var(--color-text-secundari);
}

.navegacio-paginacio-usuaris,
.formulari-usuari-admin--edicio,
.fila-accions-usuaris--edicio,
.formulari-nota--nova {
    border-top-color: var(--color-border-suau);
}

.paginacio-usuaris a {
    border-color: var(--color-border-suau);
    color: var(--color-text-secundari);
}

.paginacio-usuaris a:hover {
    border-color: var(--color-border-fort);
    background: var(--color-superficie-tint);
}

/* Notes form polish */
.panell-notes-dia {
    border-radius: 16px;
    padding: 1rem;
}

#modal-notes-dia .panell-notes-dia {
    padding: 0.15rem 0.1rem 0.3rem;
}

.capcalera-notes {
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.capcalera-notes-titol {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color-primari-fosc);
}

.meta-notes-data {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border-suau);
    border-radius: 999px;
    background: #ffffff;
    padding: 0.2rem 0.56rem;
    font-size: 0.76rem;
}

.selector-notes-dia {
    max-width: 460px;
    margin-bottom: 0.9rem;
}

.selector-notes-dia .etiqueta-camp {
    margin-bottom: 0.25rem;
}

.selector-notes-dia .form-select {
    border-radius: 999px;
    background: #ffffff;
}

.bloc-notes-professional {
    border-left: 4px solid var(--color-professional, var(--color-primari));
    padding: 0.82rem;
}

.bloc-notes-professional h3 {
    margin-bottom: 0.72rem;
    font-size: 0.94rem;
}

.bloc-notes-professional h3 .punt-color {
    width: 12px;
    height: 12px;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px rgba(63, 20, 18, 0.12);
}

.llista-notes-dia {
    gap: 0.65rem;
}

.item-nota-dia {
    border-radius: 12px;
    padding: 0.6rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.item-nota-dia:hover {
    border-color: var(--color-border-fort);
    box-shadow: 0 6px 14px rgba(63, 20, 18, 0.08);
}

.item-nota-dia--readonly p {
    margin: 0 0 0.28rem;
    line-height: 1.35;
}

.nota-meta-temporal {
    display: block;
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    color: var(--color-text-secundari);
}

.formulari-nota textarea {
    min-height: 92px;
    line-height: 1.35;
    background: #fffdfd;
}

.accions-nota-dreta {
    min-width: auto;
    gap: 0.4rem;
}

.accions-nota-dreta .btn {
    width: auto;
    min-width: 92px;
    border-radius: 999px;
    font-weight: 600;
}

.formulari-nota--nova {
    margin-top: 0.95rem;
    padding-top: 0.95rem;
}

.formulari-nota--nova .item-nota-dia {
    border-style: dashed;
}

.formulari-nota--nova .accions-nota-dreta .btn {
    min-width: 106px;
}

.missatge-notes-buit {
    padding: 0.45rem 0.55rem;
    border: 1px dashed var(--color-border-suau);
    border-radius: 10px;
    background: #ffffff;
}

/* Event detail modal polish */
#modal-detall-esdeveniment .modal__container {
    width: min(860px, 95vw);
    border-radius: 16px;
    border-color: var(--color-border-suau);
    box-shadow: 0 22px 44px var(--color-ombra-forta);
}

#modal-detall-esdeveniment .modal__header {
    padding: 0.85rem 1rem;
    background:
        radial-gradient(circle at 96% 0%, rgba(234, 198, 198, 0.58) 0%, transparent 56%),
        linear-gradient(180deg, #fff8f7 0%, #f8eeee 100%);
    border-bottom-color: var(--color-border-suau);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
}

#modal-detall-esdeveniment .modal__title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--color-text-principal);
}

#modal-detall-esdeveniment .modal__close {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 999px;
    border: 1px solid var(--color-border-suau);
    background: #ffffff;
    color: var(--color-text-secundari);
}

#modal-detall-esdeveniment .modal__close::before {
    content: "\00d7";
    font-size: 1.18rem;
    font-weight: 700;
    line-height: 1;
}

#modal-detall-esdeveniment .modal__close:hover {
    background: var(--color-superficie-alt);
    border-color: var(--color-border-fort);
}

#modal-detall-esdeveniment .modal__content {
    padding: 0.95rem;
    background: linear-gradient(180deg, var(--color-superficie-alt) 0%, #ffffff 100%);
}

.detall-esdeveniment {
    display: grid;
    gap: 0.8rem;
}

.detall-esdeveniment-capcalera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.78rem 0.82rem;
    border: 1px solid var(--color-border-suau);
    border-radius: 14px;
    background: linear-gradient(180deg, var(--color-superficie-tint) 0%, #ffffff 100%);
}

.detall-capcalera-text {
    min-width: 0;
    display: grid;
    gap: 0.22rem;
}

.detall-kicker {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primari-fosc);
}

.detall-titol {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.22;
    color: var(--color-text-principal);
    word-break: break-word;
}

.detall-pastilles {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.36rem;
}

.detall-pill {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border-suau);
    border-radius: 999px;
    padding: 0.23rem 0.62rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.1;
    text-transform: uppercase;
    white-space: nowrap;
}

.detall-pill--tipus {
    background: #ffffff;
    color: var(--color-primari-fosc);
}

.detall-pill--estat {
    background: #ffffff;
    color: var(--color-text-secundari);
}

.detall-pill--estat-pendent {
    background: #fff6e6;
    border-color: #f4c77f;
    color: #7a4b11;
}

.detall-pill--estat-realitzat {
    background: #eafaf1;
    border-color: #8ad0ad;
    color: #165f3d;
}

.detall-pill--estat-no-realitzat {
    background: #fff0f0;
    border-color: #efb3b3;
    color: #8e2929;
}

.detall-pill--estat-lliure {
    background: #eff6ff;
    border-color: #c3d3e7;
    color: #3b4f6f;
}

.dades-detall-esdeveniment {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.48rem;
}

.dada-detall-item {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(130px, 150px) minmax(0, 1fr);
    gap: 0.35rem 0.78rem;
    align-items: start;
    padding: 0.46rem 0.64rem;
    border: 1px solid var(--color-border-suau);
    border-radius: 11px;
    background: #ffffff;
}

.dada-detall-item dt {
    margin: 0;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-primari-fosc);
}

.dada-detall-item dd {
    margin: 0;
    color: var(--color-text-principal);
    line-height: 1.35;
    word-break: break-word;
}

.dada-detall-item dd .text-muted {
    color: var(--color-text-secundari) !important;
}

.dada-detall-item a {
    color: var(--color-primari-fosc);
    text-decoration: none;
    border-bottom: 1px dashed rgba(190, 58, 52, 0.38);
}

.dada-detall-item a:hover {
    color: var(--color-primari);
    border-bottom-color: rgba(190, 58, 52, 0.7);
}

.llista-persones-detall {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.2rem;
}

.llista-persones-detall li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.22rem;
}

.detall-seccio {
    margin: 0;
    padding: 0.62rem 0.66rem;
    border: 1px solid var(--color-border-suau);
    border-radius: 11px;
    background: linear-gradient(180deg, var(--color-superficie-alt) 0%, #ffffff 100%);
}

.detall-seccio h4 {
    margin: 0 0 0.36rem;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-primari-fosc);
}

.detall-seccio-llista {
    margin: 0;
    padding-left: 1rem;
    display: grid;
    gap: 0.17rem;
}

.detall-seccio-llista li {
    line-height: 1.3;
}

.accions-detall-esdeveniment {
    margin-top: 0.1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.44rem;
}

.accions-detall-esdeveniment form {
    margin: 0;
}

.accions-detall-esdeveniment .btn {
    border-radius: 999px;
    font-weight: 600;
    padding-left: 0.72rem;
    padding-right: 0.72rem;
}

#modal-detall-esdeveniment .btn-outline-secondary {
    border-color: var(--color-border-fort);
    color: var(--color-text-secundari);
}

#modal-detall-esdeveniment .btn-outline-secondary:hover {
    border-color: var(--color-primari);
    color: var(--color-primari-fosc);
    background: var(--color-superficie-tint);
}

@media (max-width: 768px) {
    #modal-detall-esdeveniment .modal__container {
        width: min(760px, 96vw);
        max-height: 92vh;
    }

    #modal-detall-esdeveniment .modal__content {
        padding: 0.75rem;
    }

    .detall-esdeveniment-capcalera {
        flex-direction: column;
        align-items: flex-start;
    }

    .detall-pastilles {
        justify-content: flex-start;
    }

    .dada-detall-item {
        grid-template-columns: 1fr;
        gap: 0.24rem;
        padding: 0.5rem 0.58rem;
    }
}