:root {
    --bg: #f4f6f8;
    --card-bg: #ffffff;
    --text: #1f2937;
    --muted: #6b7280;
    --border: #e2e5e9;
    --primary: #004EB3;        /* blau corporatiu Vall d'Hebron (botons, enllaços, topbar) */
    --primary-dark: #003A86;   /* to fosc per a hover */
    --primary-soft: #E6EEFB;   /* fons blau clar per a estats actius/hover neutres */
    --dui: #0E7C86;            /* teal, color de la categoria DUI */
    --dui-bg: #E1F2F2;         /* tint clar del teal per a les targetes DUI */
    --tcai: #b5652a;           /* taronja, color de la categoria TCAI (sense canvis) */
    --tcai-bg: #fbeee1;
    --suplent: #6B46C1;        /* morat, etiqueta de vinculació Suplent */
    --error-bg: #fdecea;
    --error-text: #b3261e;
    --pot: #9a5b00;            /* ambre fosc: estat «Pot (només si cal)» */
    --pot-bg: #fff1d6;
    --reforc: #b8860b;         /* daurat fosc: franja i etiqueta «REFORÇ» */
    --reforc-bg: #fffbeb;      /* groc molt pàl·lid: fons de les cel·les de reforç */
}

* { box-sizing: border-box; }

/* L'atribut `hidden` sempre amaga l'element, encara que una classe li fixi un
   `display` (p. ex. .planilla-lloc { display: flex } o .btn { display:
   inline-block }). El JS fa servir `element.hidden` per filtrar/ocultar. */
[hidden] { display: none !important; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.4;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Alçada de la topbar: s'usa als càlculs de min-height de sota */
:root {
    --topbar-h: 60px;
    --topbar-bg: #004EB3;  /* blau corporatiu Vall d'Hebron */
}

.topbar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: var(--topbar-h);
    padding: 0 1.5rem;
    background: var(--topbar-bg);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 40;
}
.topbar .brand {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    color: #fff;
    text-decoration: none;
}
.topbar .brand:hover { text-decoration: none; }
.brand-text { font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; }
.topbar .topbar-user { display: flex; align-items: center; gap: 1rem; margin-left: auto; flex: 0 1 auto; min-width: 0; }
/* Un nom molt llarg es talla amb «…» abans que la barra es desbordi. */
.topbar .who { opacity: 0.92; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 16rem; }

/* Menú principal, en horitzontal a la barra de dalt. L'entrada de la pantalla on
   s'és queda marcada (negreta i ratlla blanca a sota); cada entrada reserva l'ample
   de la seva versió en negreta (::after invisible amb el mateix text), perquè la
   barra no es mogui segons quina és l'activa. */
.menu-principal { align-self: stretch; display: flex; }
.menu-principal > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; gap: 0.25rem; }
.menu-principal > ul > li { position: relative; display: flex; }
.menu-entrada {
    display: inline-flex; flex-direction: column; justify-content: center;
    padding: 0 0.8rem;
    background: none; border: 0; border-bottom: 3px solid transparent; border-top: 3px solid transparent;
    color: #fff; font: inherit; font-size: 0.95rem; white-space: nowrap; cursor: pointer;
    opacity: 0.92;
}
.menu-entrada::after {
    content: attr(data-text);
    display: block; height: 0; overflow: hidden; visibility: hidden;
    font-weight: 700;
}
button.menu-entrada { flex-direction: row; align-items: center; gap: 0.3rem; }
button.menu-entrada::after { display: none; }
.menu-entrada:hover, .menu-desplegable.obert > .menu-entrada { background: rgba(255, 255, 255, 0.12); text-decoration: none; opacity: 1; }
.menu-entrada.actiu { border-bottom-color: #fff; font-weight: 700; opacity: 1; }
.menu-entrada:focus-visible, .submenu a:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.menu-fletxa { font-size: 0.75rem; }
/* Desplegable: just a sota de l'entrada, sense espai entre els dos (perquè el ratolí
   no en surti en baixar-hi). */
.submenu {
    display: none;
    position: absolute; top: 100%; left: 0; min-width: 100%;
    list-style: none; margin: 0; padding: 0.35rem 0;
    background: var(--card-bg); color: var(--text);
    border: 1px solid var(--border); border-top: 0; border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
}
.menu-desplegable.obert > .submenu { display: block; }
.submenu a {
    display: block; padding: 0.5rem 1rem; white-space: nowrap;
    color: var(--text); font-size: 0.92rem; border-left: 3px solid transparent;
}
.submenu a:hover { background: var(--bg); text-decoration: none; }
.submenu a.actiu { border-left-color: var(--primary); background: var(--primary-soft); color: var(--primary-dark); font-weight: 600; }
.submenu a:focus-visible { outline-color: var(--primary); }

/* Botó ☰: només a les pantalles estretes, on recull el menú. */
.menu-boto {
    display: none; align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0; flex: 0 0 auto;
    background: transparent; color: #fff; font-size: 1.15rem; line-height: 1;
    border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 6px; cursor: pointer;
}
.menu-boto:hover { background: rgba(255, 255, 255, 0.14); }
.menu-boto:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* El contingut ocupa tot l'ample de la finestra. */
.content { min-width: 0; padding: 1.5rem 2rem; }

/* Amb set entrades (des de «Formacions»), el menú sencer en una línia necessita uns
   1.580px i compactat uns 1.410px (mesurat amb el nom d'usuari més llarg). Entre 1.421 i
   1.599px la barra es compacta (totes les entrades igual: menys marge i lletra una mica
   més petita) i hi cap en una línia; per sota de 1.421px el menú es recull al botó ☰
   (el mateix límit que `estreta` a base.html). */
@media (min-width: 1421px) and (max-width: 1599px) {
    .topbar { gap: 1rem; padding: 0 1rem; }
    .menu-principal > ul { gap: 0; }
    .menu-entrada { padding: 0 0.55rem; font-size: 0.9rem; }
    .topbar .topbar-user { gap: 0.5rem; }
    .topbar .who { max-width: 9rem; }
}

@media (max-width: 1420px) {
    .topbar { flex-wrap: wrap; gap: 0.6rem 0.9rem; padding: 0.55rem 1rem; }
    .menu-boto { display: inline-flex; order: -1; }
    .topbar .topbar-user { gap: 0.6rem; }
    /* El menú es desplega cap avall, a tota l'amplada, sota la barra. */
    .menu-principal {
        display: none; order: 10; flex: 1 0 100%;
        margin: 0 -1rem -0.55rem; padding: 0.3rem 0 0.5rem;
        border-top: 1px solid rgba(255, 255, 255, 0.25);
    }
    .menu-principal.obert { display: block; }
    .menu-principal > ul { flex-direction: column; gap: 0; }
    .menu-principal > ul > li { display: block; }
    .menu-entrada {
        display: block; width: 100%; text-align: left; padding: 0.6rem 1.2rem;
        border: 0; border-left: 4px solid transparent;
    }
    .menu-entrada::after { display: none; }
    .menu-entrada.actiu { border-left-color: #fff; border-bottom: 0; }
    button.menu-entrada { cursor: default; }
    button.menu-entrada:hover { background: none; }
    .menu-fletxa { display: none; }
    /* A la pantalla estreta, les opcions del desplegable es veuen sempre. */
    .submenu, .menu-desplegable.obert > .submenu {
        display: block; position: static; min-width: 0;
        background: none; border: 0; box-shadow: none; padding: 0;
    }
    .submenu a { color: #fff; padding: 0.5rem 1.2rem 0.5rem 2.2rem; border-left: 4px solid transparent; opacity: 0.92; }
    .submenu a:hover { background: rgba(255, 255, 255, 0.12); }
    .submenu a.actiu { background: rgba(255, 255, 255, 0.16); color: #fff; border-left-color: #fff; opacity: 1; }
    .content { padding: 1.25rem; }
}
@media (max-width: 520px) {
    .topbar { gap: 0.5rem 0.6rem; padding: 0.55rem 0.75rem; }
    .menu-principal { margin: 0 -0.75rem -0.55rem; }
    .topbar .who { display: none; }
    .brand-text { font-size: 0.9rem; }
    .topbar .topbar-user { gap: 0.1rem; }
    .topbar .topbar-user .btn-link { font-size: 0.85rem; padding: 0.2rem 0.3rem; }
}

.btn {
    display: inline-block;
    padding: 0.45rem 0.9rem;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 0.95rem;
}
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); text-decoration: none; }
.btn-secondary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-secondary:hover { background: var(--primary-dark); text-decoration: none; }
.btn-link { background: none; border: none; color: var(--primary); text-decoration: underline; padding: 0.2rem 0.4rem; cursor: pointer; font-size: 0.95rem; }
.topbar .btn-link { color: #fff; }
.btn-danger { background: var(--error-text); color: #fff; border-color: var(--error-text); }
.btn-danger:hover { background: #8f1e17; text-decoration: none; }

.container { max-width: 960px; margin: 0 auto; padding: 1.5rem; }

/* Pantalla d'accés: fons degradat (blanc → blau molt clar) amb la planilla animada del
   <canvas> (login.html) per sobre del degradat i per sota de tot. La targeta, a l'esquerra
   (centrada en pantalles petites), blanca semitransparent amb un desenfocament discret; el
   lema, a la zona lliure de la dreta (a sota de la targeta en pantalles petites). */
.login-pagina {
    position: fixed; inset: 0; z-index: 0; overflow-y: auto;
    display: flex; align-items: safe center; justify-content: flex-start;
    padding: 2rem 2rem 2rem max(2rem, 9vw);
    background: linear-gradient(135deg, #ffffff 0%, #f1f6fd 45%, #dfeaf8 100%);
}
.login-fons { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.login-fons.a-punt { opacity: 1; }
.login-box {
    position: relative; flex: 0 0 auto;
    width: 380px; max-width: 100%;
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 46, 110, 0.08), 0 1px 3px rgba(0, 46, 110, 0.06);
    padding: 2rem 2rem 2.2rem;
    text-align: center;
}
.login-logo { display: block; height: 40px; width: auto; margin: 0 auto 0.9rem; }
.login-box h1 { margin: 0; color: var(--primary); letter-spacing: 0.04em; }
/* Lema: centrat a la zona lliure de la dreta, gran i lleuger, en blau corporatiu suau.
   Amplada fixa i tres línies sempre reservades: en canviar, no es mou res de lloc. */
.login-lema-zona { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 0 3vw; }
.login-lema {
    width: min(34rem, 100%); min-height: 3.9em; margin: 0;
    display: flex; align-items: center; justify-content: center; text-align: center;
    font-weight: 300; font-size: clamp(1.6rem, 2.4vw, 2.3rem); line-height: 1.3; letter-spacing: 0.01em;
    color: rgba(0, 78, 179, 0.72);
}
#login-lema { display: block; transition: opacity 0.6s ease, transform 0.6s ease; }
#login-lema.surt { opacity: 0; }
#login-lema.entra { opacity: 0; transform: translateY(5px); transition: none; }
@media (prefers-reduced-motion: reduce) {
    #login-lema, .login-fons { transition: none; }
}
.login-box .subtitle { margin: 0; }
.login-box .error { margin: 1rem 0 0; text-align: left; }
.login-box form { display: flex; flex-direction: column; gap: 0.75rem; text-align: left; margin-top: 1rem; }
.login-box label { font-weight: 600; font-size: 0.9rem; }
@media (max-width: 900px) {
    /* Sense zona lliure: el lema, a sota de la targeta, centrat i més petit. */
    .login-pagina { flex-direction: column; justify-content: safe center; align-items: center; padding: 1.5rem 16px; gap: 1.1rem; }
    .login-lema-zona { flex: 0 0 auto; width: 100%; padding: 0; }
    .login-lema { width: min(380px, 100%); min-height: 2.9em; font-size: 1.1rem; line-height: 1.4; }
}
@media (max-width: 700px) {
    .login-box { width: 100%; padding: 1.6rem 1.3rem 1.8rem; }
}
.subtitle { color: var(--muted); margin-top: -0.5rem; }

input, select, textarea {
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.95rem;
    background: #fff;
    color: var(--text);
}
label { font-weight: 600; font-size: 0.85rem; color: var(--muted); display: block; margin-bottom: 0.25rem; }

.error {
    background: var(--error-bg);
    color: var(--error-text);
    padding: 0.6rem 0.9rem;
    border-radius: 6px;
    margin-bottom: 1rem;
}

.list-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.list-header-actions { display: flex; align-items: center; gap: 0.75rem; }
.legend { display: flex; gap: 1rem; font-size: 0.9rem; color: var(--muted); margin-top: 0.5rem; }
.legend-item { display: flex; align-items: center; gap: 0.4rem; }
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
.swatch-dui { background: var(--dui); }
.swatch-tcai { background: var(--tcai); }

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.prof-card {
    display: block;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-left: 6px solid var(--border);
    border-radius: 8px;
    padding: 1rem 1.1rem;
    color: var(--text);
}
.prof-card:hover { text-decoration: none; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.prof-card.cat-dui { border-left-color: var(--dui); background: var(--dui-bg); }
.prof-card.cat-tcai { border-left-color: var(--tcai); background: var(--tcai-bg); }
.prof-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.3rem; }
.prof-card h2 { margin: 0.2rem 0 0.5rem; font-size: 1.1rem; }
.denari { color: #000; font-size: 1.05rem; font-weight: 700; }
.prof-meta { list-style: none; padding: 0; margin: 0; font-size: 0.88rem; color: var(--text); }
.prof-meta li { margin-bottom: 0.15rem; }

.badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.badge-dui { background: var(--dui); color: #fff; }
.badge-tcai { background: var(--tcai); color: #fff; }
.badge-arxivat { background: var(--muted); color: #fff; }
.badge-suplent { background: var(--suplent); color: #fff; }

/* Estat d'un dia a «Dies de la planilla» (vegeu estat_dia_planilla a app.py). */
.badge-estat-importat { background: var(--muted); color: #fff; }
.badge-estat-assignat { background: var(--primary-soft); color: var(--primary-dark); }
.badge-estat-desactualitzat { background: var(--pot-bg); color: var(--pot); }
.badge-estat-confirmat { background: var(--dui); color: #fff; }

/* Etiqueta "SUPLENT" junt al nom del professional (targetes i llista). Es
   mostra sempre que vinculacio = Suplent, independentment de si la fitxa té
   contracte actiu (el grisat de .es-sense-contracte és un efecte apart). */
.badge-suplent-nom { margin-left: 0.4rem; vertical-align: middle; }
/* A la vista de llista l'etiqueta va sempre en una línia pròpia sota el nom,
   alineada a l'esquerra, sigui el nom curt o llarg. */
.prof-table .etiqueta-vinculacio { display: block; margin-top: 0.25rem; line-height: 1; }

.view-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.view-header h1 { margin: 0.3rem 0 0.2rem; }
.actions { display: flex; gap: 0.5rem; align-items: center; }

.card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.1rem 1.3rem;
    margin-bottom: 1rem;
}
.card h3 { margin-top: 0; font-size: 1rem; color: var(--primary-dark); }

.detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.8rem; margin: 0; }
.detail-grid dt { font-size: 0.8rem; color: var(--muted); font-weight: 600; }
.detail-grid dd { margin: 0.1rem 0 0; }

.chip-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip { background: var(--primary-soft); color: var(--primary-dark); border-radius: 999px; padding: 0.25rem 0.7rem; font-size: 0.85rem; }

.formacio-llista { list-style: none; padding: 0; margin: 0 0 0.8rem; display: flex; flex-direction: column; gap: 0.35rem; }
.formacio-item {
    display: flex; align-items: center; gap: 0.6rem;
    background: var(--primary-soft); color: var(--primary-dark);
    border-radius: 8px; padding: 0.35rem 0.7rem; font-size: 0.9rem;
}
.formacio-nom { flex: 1; }
.formacio-data { font-size: 0.8rem; color: var(--muted); }
.formacio-treu { padding: 0 0.2rem; line-height: 1; font-size: 1rem; }
.formacio-nova { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.formacio-nova input[type="text"] { flex: 1; min-width: 180px; }
/* Data de realització: un any o una data sencera, en un camp de text curt. */
.formacio-nova input.formacio-data-camp { flex: 0 0 11rem; min-width: 0; }

.empty { color: var(--muted); }

.field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.9rem; }
.field { margin-bottom: 0.9rem; }
.subsection { margin-top: 0.5rem; }
.subsection-title {
    margin: 1.3rem 0 0.7rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary-dark);
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.3rem;
}
.subsection-title:first-child { margin-top: 0.4rem; }
.card .subsection-title:first-of-type { margin-top: 0.8rem; }
.radio-group { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; }
.radio-group label { font-weight: 400; color: var(--text); display: flex; align-items: center; gap: 0.3rem; }
.radio-group input { width: auto; }

.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.5rem; }
.checkbox-item { font-weight: 400; color: var(--text); display: flex; align-items: center; gap: 0.4rem; }
.checkbox-item input { width: auto; }

.hint { color: var(--muted); font-size: 0.85rem; margin-top: -0.3rem; }
/* Avís de validació just sota un camp del formulari (p. ex. dates invertides). */
.avis-camp { color: var(--error-text); font-size: 0.85rem; font-weight: 600; margin: 0.3rem 0 0; }
.avis-camp[hidden] { display: none; }
.avis-count { color: var(--error-text); font-weight: 600; }

.form-actions { display: flex; gap: 0.8rem; align-items: center; margin-top: 1rem; }
.opcional { font-weight: 400; color: var(--muted); text-transform: none; }

/* Fitxa de professional: «Formacions específiques» i «Comentaris del
   supervisor/a» viuen, per necessitat (vegeu el comentari a
   professional_form.html), FORA del <form> de la fitxa, però s'han de veure al
   seu lloc: les formacions dins de «Competències» i els comentaris al final.
   `.ficha-form` es fa transparent a la disposició (`display: contents`) perquè
   les seves targetes s'ordenin en el mateix contenidor flex que les de fora, i
   cada targeta (o tros de targeta) porta el seu ordre, el mateix de la vista. */
.ficha-layout { display: flex; flex-direction: column; }
.ficha-form { display: contents; }
.ficha-layout .fx-personals { order: 1; }
.ficha-layout .fx-vinculacio { order: 2; }
.ficha-layout .fx-competencies-a { order: 3; }
.ficha-layout .fx-formacions { order: 4; }
.ficha-layout .fx-competencies-b { order: 5; }
.ficha-layout .planilla-card { order: 6; }
.ficha-layout .fx-comentaris { order: 8; }
.ficha-layout .form-actions { order: 9; }
/* Una targeta feta de trossos seguits (cap, mig, peu) es veu com una de sola. */
.card.card-tros-cap { margin-bottom: 0; padding-bottom: 0.9rem; border-bottom: 0; border-radius: 8px 8px 0 0; }
.card.card-tros-mig { margin: 0; padding-top: 0; padding-bottom: 0.9rem; border-top: 0; border-bottom: 0; border-radius: 0; }
.card.card-tros-peu { padding-top: 0; border-top: 0; border-radius: 0 0 8px 8px; }

/* Fitxa (vista i edició): la mateixa graella a les dues, perquè cada camp quedi
   al mateix lloc. Els camps amples (àrees, supervisors, formacions) ocupen tota
   la fila. */
.fitxa-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.9rem; }
.fitxa-grid > .field { margin-bottom: 0; }
.fitxa-grid > .camp-ample { grid-column: 1 / -1; }
/* Línia d'informació de «Vinculació i situació» (Servei, Torn): ocupa tota la fila i
   reparteix els seus camps en les mateixes columnes que la resta de la fitxa. Una
   ratlla fina a dalt la separa de la línia anterior. */
.fitxa-grid > .fitxa-linia {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    grid-template-columns: subgrid;
    gap: 0.9rem;
    border-top: 1px solid var(--border);
    padding-top: 0.8rem;
}
.fitxa-linia > .field { margin-bottom: 0; }
.fitxa-grid .checkbox-grid { margin-top: 0.2rem; }
.fitxa-grid .hint { margin: 0 0 0.3rem; }
.etiqueta-camp { font-weight: 600; font-size: 0.85rem; color: var(--muted); margin: 0 0 0.35rem; }
.detail-grid.fitxa-grid dd .formacio-llista { margin: 0.2rem 0 0; }
.nivell-camp { display: flex; align-items: center; gap: 0.4rem; }
.nivell-camp input { width: 5rem; }
/* Bloc que depèn del tipus de vinculació (fix/interí o suplent): marcat amb una
   franja a l'esquerra i l'etiqueta «Només …», perquè quedi clar a qui correspon. */
.bloc-vinculacio { margin-top: 1.2rem; padding: 0.2rem 0 0.2rem 0.9rem; border-left: 3px solid var(--primary-soft); }
.bloc-vinculacio-titol { margin: 0 0 0.6rem; font-size: 0.95rem; color: var(--primary-dark); display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.bloc-vinculacio-nomes {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    background: var(--primary-soft); color: var(--primary-dark); border-radius: 999px; padding: 0.1rem 0.55rem;
}
.bloc-vinculacio .subsection-title:first-of-type { margin-top: 0.4rem; }
.badge-editant { background: var(--primary-soft); color: var(--primary-dark); }

/* «Desa els canvis / Cancel·la» de la fitxa: barra enganxada al peu de la
   pantalla mentre es baixa (només CSS: el botó és el mateix submit de sempre,
   sense cap JavaScript). És `sticky` i no `fixed`: al final de la fitxa torna
   al seu lloc, sota l'última targeta, i no la tapa mai. Funciona perquè cap
   contenidor de la fitxa té `overflow`. L'ample és el de la columna de
   contingut, que ara ocupa tot l'ample de la finestra. */
.ficha-layout .form-actions {
    position: sticky;
    bottom: 0;
    z-index: 20;
    flex-wrap: wrap;
    margin: 1rem 0 0;
    padding: 0.7rem 1.3rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.08);
}
/* Quan el navegador hi fa córrer la pàgina (tabulador, camp obligatori buit),
   deixa el camp per sobre de la barra i no amagat a sota. */
html:has(.ficha-layout) { scroll-padding-bottom: 5rem; }
@media (max-width: 720px) {
    .ficha-layout .form-actions { padding: 0.6rem 0.9rem; }
}

/* -------- Barra d'eines del llistat: cerca + filtre + canvi de vista -------- */
.toolbar-wrap { display: flex; align-items: stretch; gap: 0.5rem; margin-top: 1rem; }
/* Barra compacta: tot en una línia si hi cap (a partir de ~1366 px); si no, dues
   línies sense espai de sobra. */
.toolbar {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.4rem 0.6rem;
}

/* Desplegable de configuració de camps visibles (engranatge) */
.config-columnes { position: relative; flex: 0 0 auto; }
.config-columnes > summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-width: 44px;
    padding: 0 0.6rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--muted);
    font-size: 1.15rem;
    cursor: pointer;
}
.config-columnes > summary::-webkit-details-marker { display: none; }
.config-columnes > summary:hover { color: var(--primary); border-color: var(--primary); }
.config-columnes[open] > summary { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }
.config-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 5px);
    z-index: 40;
    width: 260px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
    padding: 0.8rem 0.9rem;
}
.config-panel .config-titol {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
    font-weight: 700;
}
.config-panel label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.35rem 0;
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--text);
    text-transform: none;
    cursor: pointer;
}
.config-panel label input { width: auto; margin: 0; }
.config-panel .config-nota { margin: 0.6rem 0 0; font-size: 0.75rem; color: var(--muted); }
/* Ordre de les columnes dins de l'engranatge: cada fila s'arrossega per ⠿. */
.config-panel .config-fixes { margin: 0 0 0.3rem; font-size: 0.75rem; color: var(--muted); }
.config-ordre { list-style: none; margin: 0; padding: 0; }
.config-col { display: flex; align-items: center; gap: 0.3rem; border-radius: 4px; touch-action: none; }
.config-col label { flex: 1 1 auto; margin: 0.25rem 0; }
.config-col label input:disabled { opacity: 0.6; }
.config-col.arrossegant { background: var(--primary-soft); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }
.config-agafa { background: none; border: 0; padding: 0.1rem 0.2rem; font-size: 1rem; line-height: 1; }
.config-agafa:focus-visible { outline: 2px solid var(--primary); border-radius: 3px; }
.config-panel .config-ordre-defecte { padding: 0; margin-top: 0.4rem; font-size: 0.82rem; }

/* Filtre desplegable per àrea de coneixement (selecció múltiple) */
.filtre-menu { position: relative; flex: 0 0 auto; }
.filtre-menu > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text);
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
}
.filtre-menu > summary::-webkit-details-marker { display: none; }
.filtre-menu > summary::after { content: "▾"; color: var(--muted); }
.filtre-menu > summary:hover { border-color: var(--primary); color: var(--primary); }
.filtre-menu[open] > summary { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.filtre-panel {
    position: absolute;
    left: 0;
    top: calc(100% + 5px);
    z-index: 40;
    width: 260px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
    padding: 0.8rem 0.9rem;
}
.filtre-panel .config-titol {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
    font-weight: 700;
}
.filtre-panel label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.35rem 0;
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--text);
    text-transform: none;
    cursor: pointer;
}
.filtre-panel label input { width: auto; margin: 0; flex: 0 0 auto; }
.filtre-panel .filtre-buit { margin: 0.3rem 0 0; font-size: 0.85rem; color: var(--muted); }

/* Amaga columnes/camps segons la preferència desada a l'usuari (engranatge) */
html.amaga-vinculacio .col-vinculacio,
html.amaga-torn .col-torn,
html.amaga-supervisor .col-supervisor,
html.amaga-arees .col-arees,
html.amaga-referent .col-referent,
html.amaga-nivell .col-nivell,
html.amaga-formacions .col-formacions,
html.amaga-comentari .col-comentari,
html.amaga-borsa .col-borsa { display: none !important; }
.toolbar-cerca { display: flex; gap: 0.35rem; flex: 1 1 270px; min-width: 270px; }
.toolbar-cerca input { flex: 1 1 auto; min-width: 0; padding-top: 0.3rem; padding-bottom: 0.3rem; }
.toolbar-cerca .btn { flex: 0 0 auto; padding: 0.3rem 0.7rem; }

.toolbar-categories { display: flex; gap: 0.3rem; }
.cat-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    user-select: none;
}
.cat-toggle input { width: auto; margin: 0; }
.cat-toggle.actiu.cat-toggle-dui { background: var(--dui); border-color: var(--dui); color: #fff; }
.cat-toggle.actiu.cat-toggle-tcai { background: var(--tcai); border-color: var(--tcai); color: #fff; }
.cat-toggle.actiu.cat-toggle-vinc { background: var(--text); border-color: var(--text); color: #fff; }

/* Res de la barra de filtres pot canviar de mida en marcar o desmarcar un
   filtre: el que només es veu de vegades («Neteja els filtres», el nombre
   d'àrees, la fila de contracte dels suplents) hi és sempre i s'amaga amb
   visibility, que conserva l'espai. */
.amagat { visibility: hidden; }
.filtre-n { display: inline-block; min-width: 1.8em; margin-left: 0.2rem; font-variant-numeric: tabular-nums; }
/* Línia sota la barra: comptador a l'esquerra, filtre de contracte a la dreta. Alçada
   mínima fixa (la del filtre), perquè aparegui o no, no mogui res. */
.sota-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 1rem; min-height: 2.2rem; margin: 0.35rem 0 0.25rem; }
/* El comptador té reservat l'ample del seu cas més llarg (filtres, «Per reordenar…» i
   «Desat ✓»): així que el filtre de contracte hi càpiga al costat o hagi d'anar a una
   segona línia depèn només de l'ample de la pantalla, mai del text, i marcar filtres
   no mou res. */
.sota-barra .result-count { margin: 0; flex: 1 0 43em; }
.toolbar-extra {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
}
.toolbar-extra .cat-toggle { padding-left: 0.45rem; padding-right: 0.45rem; }
.toolbar-extra-titol { font-size: 0.85rem; color: var(--muted); }

.view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; margin-left: auto; }
.view-toggle a {
    padding: 0.3rem 0.6rem;
    font-size: 0.85rem;
    color: var(--muted);
    background: #fff;
}
.view-toggle a:hover { text-decoration: none; background: var(--bg); }
.view-toggle a + a { border-left: 1px solid var(--border); }
.view-toggle a.actiu { background: var(--primary); color: #fff; }

.result-count { color: var(--muted); font-size: 0.85rem; margin: 0.3rem 0 0.25rem; }

/* -------- Vista de llista / taula -------- */
.table-wrap { overflow-x: auto; margin-top: 0.5rem; }
.prof-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.9rem;
}
.prof-table th, .prof-table td {
    text-align: left;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--border);
}
.prof-table th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.prof-table tbody tr:last-child td { border-bottom: none; }
.prof-table tbody tr { cursor: pointer; }
.prof-table tbody tr:hover { background: var(--primary-soft); }
.prof-table td a { font-weight: 600; }
.prof-table td:last-child, .prof-table td.col-arees { max-width: 340px; }
.prof-table td.col-nivell { white-space: nowrap; }
.prof-table td.col-formacions { max-width: 300px; }

/* Text llarg d'una cel·la: es talla amb «…» i es veu sencer en passar el ratolí
   (atribut title), perquè cap columna no descol·loqui la taula. */
.cel-tallada {
    display: block; max-width: 10rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prof-meta .cel-tallada { max-width: none; }

/* Grups per categoria (DUI, TCAI) als llistats de professionals */
.grup-cap { display: flex; align-items: center; gap: 0.6rem; margin: 1.5rem 0 0; font-size: 1rem; }
.grup-cap:first-of-type { margin-top: 1rem; }
.grup-cap .badge { font-size: 0.85rem; padding: 0.25rem 0.7rem; }
.grup-n { color: var(--muted); font-weight: 600; font-size: 0.9rem; }
.card-grid { margin-top: 0.6rem; }
.prof-table tbody.grup-cap { display: table-row-group; }
.prof-table tbody.grup-cap tr { cursor: default; }
.prof-table tbody.grup-cap tr:hover { background: none; }
.prof-table tbody.grup-cap th {
    text-transform: none; letter-spacing: 0; color: var(--text);
    background: var(--bg, #f5f6f8); border-top: 2px solid var(--border); border-bottom: 1px solid var(--border);
}
.prof-table tbody.grup-cap th > * { vertical-align: middle; }
.prof-table tbody.grup-cap .grup-n { margin-left: 0.5rem; }
.prof-table tbody:not(:last-child) tr:last-child td { border-bottom: 1px solid var(--border); }

/* Etiquetes compactes d'àrea de coneixement, als llistats */
.area-chips { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.5rem; }
.prof-table .area-chips { margin-top: 0; }
.area-chip {
    display: inline-block;
    background: var(--primary-soft);
    color: var(--primary-dark);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    font-size: 0.72rem;
    line-height: 1.5;
    white-space: nowrap;
}

/* -------- Informació de contracte (suplents) als llistats -------- */
:root { --avis: #b45309; }

.contracte-box {
    margin: 0.4rem 0 0.55rem;
    padding: 0.45rem 0.6rem;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.035);
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.contracte-box .contracte-concepte { font-weight: 600; }
.contracte-fi { color: var(--muted); }
.contracte-fi.alerta { color: var(--avis); font-weight: 700; }
.alerta-icona { font-style: normal; }
.contracte-inici { color: var(--muted); }
.td-contracte .contracte-fi, .td-contracte .contracte-inici { white-space: nowrap; }

.contracte-linia { margin: 0.3rem 0 0.55rem; }

/* Columna «Contractes»: dues línies («Actual» i «Propera») amb lletra més petita
   que la resta de la taula. El text es talla amb «…»; l'avís ⚠️ no es talla mai.
   Cada línia té una alçada fixa (també amb l'etiqueta «No té contracte» o l'avís),
   perquè les dues quedin al mateix lloc a totes les files. */
.contractes { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.78rem; line-height: 1.35; }
.contractes-l { display: flex; align-items: center; gap: 0.3rem; min-width: 0; height: 1.35em; }
.contractes-l .tag-sense-contracte { line-height: 1.2; padding-top: 0.05rem; padding-bottom: 0.05rem; }
.contractes-l .alerta-icona { line-height: 1; }
.prof-table .contractes-l { max-width: 16rem; }
.contractes-et { flex: 0 0 auto; font-weight: 700; color: var(--muted); }
.contractes-text { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contractes-l.alerta .contractes-text { color: var(--avis); font-weight: 700; }
.contractes-l .alerta-icona { flex: 0 0 auto; }
/* Contracte sense data de fi («OBERT»): a part del text, perquè no es talli mai. */
.contracte-obert { font-weight: 700; white-space: nowrap; }
.contractes-l .contracte-obert { flex: 0 0 auto; }
.contracte-box .contractes { font-size: 0.8rem; }

/* -------- Comentaris del supervisor (llistat de fitxes) --------
   Una sola línia tallada amb «…». A «Els meus professionals» la casella és un botó
   que s'edita al lloc: el quadre (.comentari-flotant) flota per sobre de la taula,
   de manera que la fila no canvia d'alçada en obrir-lo o tancar-lo. */
.prof-table td.col-comentari { max-width: 16rem; }
.comentari-cel { display: flex; align-items: center; gap: 0.25rem; min-width: 9rem; max-width: 16rem; }
.comentari-cel.editant .comentari-mostra { visibility: hidden; }
.comentari-mostra {
    flex: 1 1 auto; min-width: 0;
    background: none; border: 1px dashed transparent; border-radius: 4px;
    padding: 0.15rem 0.3rem; margin: -0.15rem 0;
    font: inherit; font-size: 0.85rem; color: inherit; text-align: left; cursor: text;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.comentari-mostra:hover, .comentari-mostra:focus-visible { border-color: var(--border); background: var(--card-bg); }
.comentari-mostra.buit { color: var(--muted); font-style: italic; opacity: 0.8; }
.comentari-gran {
    flex: 0 0 auto; background: none; border: 0; padding: 0 0.15rem;
    color: var(--muted); font-size: 0.85rem; line-height: 1; cursor: pointer;
}
.comentari-gran:hover, .comentari-gran:focus-visible { color: var(--primary); }
.comentari-lectura {
    display: block; max-width: 16rem; font-size: 0.85rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.comentari-targeta { position: relative; z-index: 2; display: flex; align-items: center; gap: 0.3rem; margin-top: 0.45rem; font-size: 0.88rem; }
.comentari-targeta .comentari-et { flex: 0 0 auto; font-weight: 700; }
.comentari-targeta .comentari-cel, .comentari-targeta .comentari-lectura { flex: 1 1 auto; max-width: none; min-width: 0; }
.comentari-flotant {
    position: absolute; z-index: 60;
    background: var(--card-bg); border: 1px solid var(--primary); border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15); padding: 0.25rem;
}
.comentari-flotant textarea {
    display: block; width: 100%; box-sizing: border-box; resize: none;
    min-height: 2.2rem; max-height: 60vh; overflow-y: auto;
    border: 0; outline: none; padding: 0.25rem; font: inherit; font-size: 0.88rem; line-height: 1.4;
}
.comentari-flotant.amb-error { border-color: var(--error-text); }
.comentari-error {
    margin: 0.3rem 0 0; padding: 0.35rem 0.5rem; border-radius: 4px;
    background: var(--error-bg); color: var(--error-text); font-size: 0.8rem; font-weight: 600;
}
.comentari-error[hidden] { display: none; }
.comentari-desfes-boto {
    padding: 0; border: 0; background: none; font: inherit; color: var(--primary);
    text-decoration: underline; cursor: pointer;
}
.comentari-desfes { font-size: 0.8rem; color: var(--primary); }
.comentari-desfes-flotant {
    position: absolute; z-index: 30; padding: 0.15rem 0.5rem; white-space: nowrap;
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.comentari-dialeg .comentari-desfes { display: block; margin: 0.4rem 0 0; }
/* Columnes «Contractes» i «Borsa i avaluació» editables a «Els meus professionals»: la
   casella es prem i s'obre el quadre .contracte-flotant per sobre de la taula (no mou
   la fila). Les dues fan servir les mateixes classes (.contractes, .contractes-edit). */
.contractes-edit { cursor: pointer; border-radius: 4px; outline-offset: 2px; }
.contractes-edit:hover { background: rgba(0, 0, 0, 0.04); }
.contractes-edit:focus-visible { outline: 2px solid var(--primary); }
.contractes-edit.editant { visibility: hidden; }
.contracte-box .contractes-edit { position: relative; z-index: 2; }
.contracte-flotant {
    position: absolute; z-index: 60;
    background: var(--card-bg); border: 1px solid var(--primary); border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); padding: 0.55rem 0.7rem 0.6rem;
    display: flex; flex-direction: column; gap: 0.45rem; box-sizing: border-box;
}
.contracte-flotant.amb-error { border-color: var(--error-text); }
.contracte-flotant-vora { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.contracte-flotant fieldset { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem 0.5rem; }
.contracte-flotant legend { padding: 0; margin-bottom: 0.2rem; font-size: 0.78rem; font-weight: 700; color: var(--primary-dark); text-transform: uppercase; letter-spacing: 0.03em; }
.contracte-flotant-camp { display: flex; flex-direction: column; gap: 0.1rem; margin: 0; font-size: 0.75rem; }
.contracte-flotant-camp.ample, .contracte-flotant .contracte-flotant-error { grid-column: 1 / -1; }
.contracte-flotant input { font: inherit; font-size: 0.85rem; padding: 0.25rem 0.4rem; min-width: 0; }
.contracte-flotant .contracte-flotant-error { margin: 0; }
/* «Passa la propera a actual» (quadre de contractes de la llista i fitxa). */
.contracte-flotant-passa { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; border-top: 1px solid var(--border); padding-top: 0.45rem; }
.contracte-flotant-passa p { margin: 0; font-size: 0.8rem; }
.passa-propera { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0.2rem 0 0.8rem; }
.contractes-historial td, .contractes-historial th { font-size: 0.85rem; }
/* Reducció de jornada: «RJ» al costat de la vinculació (llistat i fitxa). VERD si la cobreix
   algú, VERMELL si no (de cop d'ull es veuen les que estan sense cobrir). Contrast del text
   blanc sobre els dos fons ≥ 4,5:1. */
.rj {
    display: inline-block; padding: 0 0.35rem; border-radius: 4px;
    font-size: 0.72rem; font-weight: 700; line-height: 1.5; letter-spacing: 0.03em; color: #fff;
}
.rj-coberta { background: #1e7d34; }
.rj-sense { background: var(--error-text); }
.vinc-cel .alerta-icona { margin-left: 0.15rem; }
/* La RJ i el COBREIX editables (Els meus professionals): per sobre de l'enllaç de la targeta. */
.vinc-edit { position: relative; z-index: 2; display: inline-block; padding: 0.05rem 0.1rem; }
.cobreix-tag {
    display: inline-block; padding: 0 0.35rem; border-radius: 4px; border: 1px solid var(--suplent);
    color: var(--suplent); font-size: 0.68rem; font-weight: 700; line-height: 1.5; letter-spacing: 0.03em;
}
.info-vinc-pop .info-vinc-separa dt, .info-vinc-pop .info-vinc-separa dd { border-top: 1px solid var(--border); padding-top: 0.25rem; }
/* «Cobreix»: la part automàtica (registrada) i la escrita a mà, sempre per separat; la
   escrita a mà, en cursiva. */
.cobreix-a-ma { font-style: italic; }
.cobreix-marca-auto, .cobreix-marca-ma {
    display: inline-block; margin-left: 0.3rem; padding: 0 0.3rem; border-radius: 4px;
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; vertical-align: 1px;
}
.cobreix-marca-auto { background: var(--border); color: var(--muted); }
.cobreix-marca-ma { background: #fff3cd; color: #6b4e00; }
.cobreix-fitxa .cobreix-nota { display: block; margin-top: 0.2rem; }
.cobreix-fitxa input { width: 100%; max-width: 32rem; box-sizing: border-box; }
.contracte-flotant .cobreix-auto { display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.85rem; }
.contracte-flotant .cobreix-auto-et { font-size: 0.78rem; font-weight: 700; color: var(--primary-dark); text-transform: uppercase; letter-spacing: 0.03em; }
.contracte-flotant .cobreix-auto small { color: var(--muted); font-size: 0.72rem; }
.contracte-flotant select { font: inherit; font-size: 0.85rem; padding: 0.2rem 0.3rem; min-width: 0; }
.contracte-flotant-pista { color: var(--muted); font-size: 0.72rem; }
.contracte-flotant-passa[hidden] { display: none; }
.reduccio-treballa { font-weight: 600; color: var(--text); }
.reduccio-te { margin: 0.2rem 0 0.6rem; font-weight: 600; }
/* Avís «Si deses la fitxa com a suplent…»: només quan el desplegable diu Suplent (CSS, sense JS). */
#reduccio-avis-vinc { display: none; }
.ficha-form:has(#vinculacio option[value="Suplent"]:checked) #reduccio-avis-vinc { display: block; }
.comentari-dialeg {
    width: min(40rem, calc(100vw - 2rem)); border: 1px solid var(--border); border-radius: 8px;
    padding: 1rem 1.1rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.comentari-dialeg::backdrop { background: rgba(0, 0, 0, 0.35); }
.comentari-dialeg h3 { margin: 0 0 0.2rem; }
.comentari-dialeg-meta { margin: 0 0 0.5rem; color: var(--muted); font-size: 0.85rem; }
.comentari-dialeg textarea { width: 100%; box-sizing: border-box; min-height: 12rem; resize: vertical; font: inherit; line-height: 1.45; }
.comentari-dialeg-accions { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 0.7rem; flex-wrap: wrap; }
.comentari-dialeg .hint { margin: 0.6rem 0 0; }

/* Formacions específiques: totes, com a etiquetes petites i compactes. */
.formacio-chips { display: inline-flex; flex-wrap: wrap; gap: 0.2rem; margin-top: 0.4rem; max-width: 100%; }
.prof-table .formacio-chips { margin-top: 0; }
.formacio-chip {
    display: inline-flex; gap: 0.25em; max-width: 11rem;
    overflow: hidden; white-space: nowrap;
    background: var(--dui-bg); color: var(--dui);
    border: 1px solid rgba(14, 124, 134, 0.25);
    border-radius: 4px; padding: 0 0.35rem;
    font-size: 0.68rem; line-height: 1.5;
}
/* El nom es talla amb «…» si no hi cap; l'any (al costat) es veu sempre sencer. */
.formacio-chip-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.formacio-chip-any { flex: 0 0 auto; font-weight: 700; }
.tag-sense-contracte {
    display: inline-block;
    background: var(--border);
    color: var(--muted);
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Menys contrast per a qui no té contracte actiu */
.prof-card.es-sense-contracte { opacity: 0.6; filter: grayscale(0.55); }
.prof-card.es-sense-contracte:hover { opacity: 0.85; }
.prof-table tr.es-sense-contracte td { color: var(--muted); background: #fafafa; }
.prof-table tr.es-sense-contracte:hover td { background: #f0f0f0; }
.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* -------- «Els meus professionals»: ordre manual i colors per supervisor/a --------
   Els colors (variable --color-fitxa de cada .color-<clau>) es generen a la plantilla
   des de COLORS_MEUS_PROFESSIONALS. Pinten tota la fila / tota la targeta; són prou
   clars perquè el text negre es llegeixi bé, i per això una fitxa pintada no es
   grisa encara que no tingui contracte (l'etiqueta «Sense contracte» continua). */
.th-ordre { width: 1%; }
.td-ordre { white-space: nowrap; cursor: default; }
.prof-table .th-ordre, .prof-table .td-ordre { padding-right: 0.2rem; }
.ordre-controls { display: inline-flex; align-items: center; gap: 0.35rem; }
.ordre-agafa {
    cursor: grab; color: var(--muted); font-size: 1.05rem; line-height: 1;
    padding: 0.2rem 0.15rem; user-select: none; touch-action: none;
}
.ordre-agafa:active { cursor: grabbing; }
.color-boto {
    width: 18px; height: 18px; padding: 0; margin-left: 0.1rem;
    border-radius: 50%; border: 1px solid #9aa3ad; cursor: pointer;
    background: var(--color-fitxa);
}
/* Arxivar / desarxivar una fitxa des de la llista del supervisor/a. */
.fitxa-arxiva {
    display: inline-flex; align-items: center; padding: 0.15rem; margin-left: 0.1rem;
    background: none; border: none; border-radius: 4px; color: var(--muted); cursor: pointer;
}
.fitxa-arxiva:hover, .fitxa-arxiva:focus-visible { color: var(--text); background: rgba(0, 0, 0, 0.07); }
.fitxa-desarxiva {
    padding: 0.1rem 0.5rem; font-size: 0.8rem; color: var(--primary); cursor: pointer;
    background: var(--card-bg); border: 1px solid var(--primary); border-radius: 999px;
}
.fitxa-desarxiva:hover, .fitxa-desarxiva:focus-visible { background: var(--primary); color: #fff; }
.fitxa-arxiva:disabled, .fitxa-desarxiva:disabled { opacity: 0.5; cursor: progress; }
.ordre-item:not(.amb-color) .color-boto,
.paleta-sense::before {
    background: linear-gradient(135deg, transparent 44%, #b5bcc4 44%, #b5bcc4 56%, transparent 56%), #fff;
}
/* Sobre color, el gris dels textos secundaris es fosqueja perquè es llegeixi bé. */
.amb-color { --muted: #4b5563; }
.prof-table tr.amb-color td { background: var(--color-fitxa); color: var(--text); }
.prof-table tr.amb-color:hover td { background: var(--color-fitxa); filter: brightness(0.96); }
/* Sense color, la targeta és blanca (la categoria es veu a la vora i a l'etiqueta):
   el to de categoria es confondria amb els colors (taronja ≈ TCAI, turquesa ≈ DUI). */
.prof-card.prof-card-ordre { display: block; background: var(--card-bg); }
/* Targeta: l'enllaç buit cobreix tota la targeta; els controls (al costat de l'etiqueta
   de categoria) queden per sobre perquè es puguin fer servir sense obrir la fitxa. */
.prof-card.prof-card-ordre { position: relative; }
.prof-card-enllac { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.prof-card-cat { display: inline-flex; align-items: center; gap: 0.5rem; }
.prof-card-ordre .ordre-controls { position: relative; z-index: 2; }
.prof-card.prof-card-ordre.amb-color { background: var(--color-fitxa); }
.prof-card.prof-card-ordre.amb-color.es-sense-contracte { opacity: 1; filter: none; }
.ordre-arrossegant { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2); outline: 2px solid var(--primary); outline-offset: -2px; position: relative; z-index: 5; }
.prof-table tr.ordre-arrossegant { box-shadow: none; }
body.ordre-arrossegant-body { user-select: none; cursor: grabbing; }
.ordre-nota { color: var(--muted); font-style: italic; }
.pt-estat.ordre-estat { display: inline; margin-left: 0.5rem; font-size: 0.8rem; }
.paleta-colors {
    position: fixed; z-index: 60;
    display: grid; grid-template-columns: repeat(5, 28px); gap: 0.4rem;
    padding: 0.55rem; background: var(--card-bg);
    border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
}
.paleta-colors[hidden] { display: none; }
.paleta-color {
    width: 28px; height: 28px; padding: 0; border-radius: 50%;
    border: 1px solid #9aa3ad; background: var(--color-fitxa); cursor: pointer;
}
.paleta-color[aria-checked="true"], .paleta-sense[aria-checked="true"] { outline: 2px solid var(--text); outline-offset: 2px; }
.paleta-sense {
    grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 0.35rem;
    padding: 0.25rem; font-size: 0.8rem; color: var(--text);
    background: #fff; border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
}
.paleta-sense::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1px solid #9aa3ad; }
/* Icona ⓘ de la vinculació (Fix/Interí) al llistat de fitxes. Mida fixa: obrir o
   tancar el quadre no mou res. L'àrea per prémer és més gran que el cercle (::before),
   sense ocupar més lloc a la fila. Dins d'una targeta amb enllaç que la cobreix, queda
   per sobre de l'enllaç. */
.info-vinc {
    position: relative; z-index: 2;
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; margin: 0 0.3rem 0 0; padding: 0;
    vertical-align: -3px; border: 1.5px solid var(--primary); border-radius: 50%;
    background: transparent; color: var(--primary); cursor: pointer;
    font: italic 700 11px/1 Georgia, "Times New Roman", serif;
}
.info-vinc::before { content: ""; position: absolute; inset: -6px; }
.info-vinc:hover, .info-vinc.info-vinc-oberta { background: var(--primary); color: #fff; }
.info-vinc:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.info-vinc-pop {
    position: fixed; z-index: 60; max-width: min(320px, calc(100vw - 16px));
    padding: 0.55rem 0.75rem; background: var(--card-bg); color: var(--text);
    border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
    font-size: 0.85rem; font-weight: normal; line-height: 1.35; text-align: left; white-space: normal;
}
.info-vinc-pop[hidden] { display: none; }
.info-vinc-pop dl { margin: 0; display: grid; grid-template-columns: auto auto; gap: 0.2rem 0.75rem; }
.info-vinc-pop dl > div { display: contents; }
.info-vinc-pop dt { color: var(--muted); }
.info-vinc-pop dd { margin: 0; font-weight: 600; }

/* Icona de copiar el número de denari (llistat i targetes). Amb ratolí només es veu en
   passar per sobre del número i no ocupa lloc (va per fora, al costat); amb el dit es
   veu sempre. L'avís «Copiat ✓» flota i no mou res. A les targetes amb enllaç que les
   cobreix, el número i la icona queden per sobre de l'enllaç. */
.denari-copiable { position: relative; display: inline-flex; align-items: center; gap: 0.15rem; white-space: nowrap; }
.prof-card-ordre .denari-copiable { z-index: 2; }
a.denari, a.denari:hover { color: #000; text-decoration: none; }
.copia-denari {
    position: relative; z-index: 2;
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; padding: 0; border: none; border-radius: 4px;
    background: transparent; color: var(--muted); cursor: pointer; font: inherit;
}
.copia-denari svg { fill: none; stroke: currentColor; stroke-width: 1.4; }
.copia-denari:hover { background: var(--primary-soft); color: var(--primary); }
.copia-denari:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.copia-denari-avis {
    position: absolute; left: calc(100% + 0.3rem); top: 50%; transform: translateY(-50%);
    padding: 0.15rem 0.5rem; border-radius: 4px; background: #1f2937; color: #fff;
    font-size: 0.8rem; font-weight: 600; white-space: nowrap; pointer-events: none;
}
.copia-denari-avis:empty { display: none; }
/* A la targeta el número va a la dreta: l'avís surt a sobre. */
.prof-card-top .copia-denari-avis { left: auto; right: 0; top: auto; bottom: calc(100% + 0.25rem); transform: none; }
@media (hover: hover) and (pointer: fine) {
    .copia-denari {
        position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
        margin-left: 0.1rem; opacity: 0;
    }
    /* A la targeta, a l'esquerra del número (a la dreta no hi ha lloc). */
    .prof-card-top .copia-denari { left: auto; right: 100%; margin: 0 0.1rem 0 0; }
    .denari-copiable:hover .copia-denari, .copia-denari:focus-visible,
    .copia-denari.copia-denari-fet { opacity: 1; }
}

/* Planilla diària: assignació automàtica de llocs, format «full Excel» */

.excel-capcalera {
    display: flex; align-items: center; gap: 1rem;
    background: var(--primary); color: #fff;
    border-radius: 10px; padding: 0.9rem 1.4rem; margin-bottom: 1rem;
}
.excel-logo { height: 40px; width: auto; flex: 0 0 auto; }
.excel-titols h2 { margin: 0; font-size: 1.4rem; }
.excel-titols p { margin: 0.15rem 0 0; font-weight: 700; letter-spacing: 0.04em; opacity: 0.9; }

.excel-planilla { border-collapse: collapse; width: 100%; table-layout: fixed; }
.excel-planilla th, .excel-planilla td {
    border: 1px solid var(--border); padding: 0.3rem 0.5rem; font-size: 0.85rem;
    overflow-wrap: break-word;
}
.excel-planilla thead th {
    background: var(--primary-soft); color: var(--primary-dark);
    font-weight: 700; text-align: center;
}
.fila-zona td {
    background: var(--muted); color: #fff; font-weight: 700; text-align: center;
    letter-spacing: 0.03em; padding: 0.35rem 0.5rem;
}
.cel-centrada { text-align: center; white-space: nowrap; }
.cel-nom-lloc { text-align: left; }
/* Color de la fila segons «Revisió»: ACR groc, PIXYS blau clar (igual que a l'Excel i al PDF) */
.cel-marca-acr { background: #FFFF00; font-weight: 700; }
.cel-marca-pixys { background: #00B0F0; font-weight: 700; }
.cel-assignat {
    position: relative; text-align: center;
    display: table-cell; vertical-align: middle;
}
.cel-assignat.cel-sense-cobrir { background: var(--error-bg); color: var(--error-text); font-weight: 700; }
.cel-assignat.cel-drop-actiu { outline: 2px dashed var(--primary); outline-offset: -2px; }
.cel-nom {
    display: inline-block; min-width: 3rem; min-height: 1.2em;
    outline: none; cursor: text;
}
.cel-nom:focus { background: var(--primary-soft); border-radius: 4px; }
.cel-buit { color: var(--muted); }
.cel-arrossega {
    cursor: grab; color: var(--muted); margin-right: 0.3rem;
    font-size: 0.85rem; user-select: none;
}
.cel-arrossega:active { cursor: grabbing; }

.peu-planilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.8rem; }
.peu-planilla label { display: flex; flex-direction: column; gap: 0.25rem; font-weight: 700; font-size: 0.85rem; }
.peu-planilla textarea { font-family: inherit; font-size: 0.9rem; font-weight: 400; resize: vertical; }

/* -------- Comentaris del supervisor/a a la fitxa -------- */
.comentari-nou { margin: 0.6rem 0 1rem; }
.comentari-nou textarea { width: 100%; margin-bottom: 0.5rem; }
.comentari-llista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.comentari {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.7rem 0.9rem;
    background: var(--card-bg);
}
.comentari-cap {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}
.comentari-autor { font-weight: 700; }
.comentari-data { font-size: 0.8rem; color: var(--muted); }
.comentari-text { white-space: pre-wrap; word-break: break-word; }
.comentari-accions { margin-top: 0.4rem; display: flex; gap: 0.6rem; }
.comentari-accions .btn { padding: 0; font-size: 0.85rem; }
.comentari-edita { margin-top: 0.5rem; }
.comentari-edita textarea { width: 100%; margin-bottom: 0.5rem; }
.comentari-edita-accions { display: flex; gap: 0.6rem; align-items: center; }

/* -------- Resaltat (fosforito) dels comentaris: llistat, targeta i fitxa --------
   Pinta NOMÉS el fons del text del comentari (mai la fila ni la targeta), amb colors
   vius de retolador (--resaltat, de COLORS_RESALTAT, a _resaltat.html), ben diferents
   dels pastels de les files. El text sempre en negre. A la fitxa, si el text fa més
   d'una línia, cada línia es pinta com amb un retolador. */
.resaltat {
    background: var(--resaltat); color: #000;
    padding: 0.05em 0.2em; border-radius: 3px;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.resalta-boto {
    position: relative; z-index: 2;
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    padding: 0.1rem; background: none; border: 0; border-radius: 4px;
    color: var(--muted); cursor: pointer;
}
.resalta-boto[hidden] { display: none; }
.resalta-boto svg { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.resalta-boto .resalta-boto-ratlla { stroke-width: 2.2; stroke-linecap: round; }
.resalta-boto:hover, .resalta-boto:focus-visible, .resalta-boto[aria-expanded="true"] { color: var(--primary); background: rgba(0, 0, 0, 0.07); }
.comentari-accions .resalta-boto { align-self: center; }
/* Paleta: rectangles amb el nom en negre (com el text resaltat), no cercles com la de
   les files, perquè no es confonguin. */
.paleta-resaltat {
    position: fixed; z-index: 60;
    display: grid; grid-template-columns: repeat(6, auto); gap: 0.35rem;
    padding: 0.55rem; background: var(--card-bg);
    border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
}
.paleta-resaltat[hidden] { display: none; }
.paleta-resaltat-color {
    padding: 0.3rem 0.45rem; border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 3px;
    background: var(--resaltat); color: #000; font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.paleta-resaltat-color[aria-checked="true"], .paleta-resaltat .paleta-sense[aria-checked="true"] { outline: 2px solid var(--text); outline-offset: 2px; }

/* -------- Secció desplegable «La meva planilla» (fitxa i formulari) -------- */
details.card > summary { list-style: none; cursor: pointer; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary h3 { display: inline; }
details.card > summary::before { content: "▸"; color: var(--muted); margin-right: 0.45rem; }
details.card[open] > summary::before { content: "▾"; }

.planilla-grups {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--primary-soft);
    padding: 0.7rem 0.9rem;
    margin: 0.4rem 0 1rem;
}
.planilla-grups-titol {
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--primary-dark);
    margin: 0 0 0.5rem;
}
.planilla-grups-llista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 0.35rem 1.2rem;
}
.planilla-grup { display: flex; align-items: center; gap: 0.4rem; }
.planilla-grup-nom { flex: 1 1 auto; font-size: 0.85rem; color: var(--text); }
.planilla-grup-btn {
    padding: 0.2rem 0.7rem;
    font-size: 0.8rem;
    min-width: 2.6rem;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text);
}
.planilla-grup-btn:hover { background: var(--primary-soft); text-decoration: none; }
/* «Actiu» = últim botó clicat a la fila (marca l'estat, no és un toggle de
   selecció múltiple: en marcar-ne un es desmarca l'altre de la mateixa fila).
   En carregar la pàgina cap botó porta aquesta classe. */
.planilla-grup-btn.actiu { background: var(--primary); border-color: var(--primary); color: #fff; }
.planilla-grup-btn.actiu:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.planilla-grups .hint { margin: 0.5rem 0 0; }

.planilla-zona { margin-top: 0.2rem; }
.planilla-lloc {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--border);
}
.planilla-lloc:last-child { border-bottom: none; }
.planilla-lloc-nom { font-size: 0.9rem; }
.planilla-lloc-meta { color: var(--muted); font-size: 0.78rem; }
.planilla-lloc-tria { flex: 0 0 auto; align-items: center; }

.planilla-resum { list-style: none; padding: 0; margin: 0; }
.planilla-resum li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}
.planilla-resum li:last-child { border-bottom: none; }
.planilla-estat { font-weight: 700; font-size: 0.82rem; white-space: nowrap; }
.planilla-estat-si { color: var(--dui); }
.planilla-estat-pot { color: var(--pot); }
.planilla-estat-no { color: var(--tcai); }

/* Un lloc (o una zona) inactiu segueix sortint a «La meva planilla» —marcable
   i amb les marques Sí/No ja fetes intactes— però es distingeix clarament en
   gris, amb l'etiqueta «inactiva», perquè no es confongui amb un lloc
   marcat «No». No s'aplica a «Estructura planilla», que ja té el seu
   propi estil per als inactius (`pt-lloc-inactiu` / `pt-zona-inactiva`). */
.planilla-tag-inactiu {
    display: inline-block;
    color: var(--muted);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0 0.35rem;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    vertical-align: middle;
}
.planilla-lloc.planilla-lloc-inactiu,
.planilla-resum li.planilla-lloc-inactiu {
    opacity: 0.6;
    background: var(--bg);
}
.planilla-lloc.planilla-lloc-inactiu .planilla-lloc-nom,
.planilla-resum li.planilla-lloc-inactiu span:first-child {
    color: var(--muted);
}

/* Un bloc de «La meva planilla» per cada supervisor/a assignat a la fitxa. */
.planilla-bloc {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.6rem 0.9rem 0.9rem;
    margin: 0.8rem 0;
}
.planilla-bloc-titol {
    margin: 0.2rem 0 0.6rem;
    font-size: 0.95rem;
    color: var(--primary-dark);
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.35rem;
}

/* -------- Pantalla «Estructura de planilla» --------
   Taula amb INFERMERIA a l'esquerra i TCAI a la dreta; cada meitat té 4
   columnes: NOM DEL LLOC | HORARI | NIVELL MÍNIM | TIPUS. La configuració de
   cada lloc s'edita a la mateixa cel·la i es desa sola (fetch a cada canvi).
   Capçalera de zona a tot l'ample, centrada i en negreta. */
.planilla-taula-wrap { overflow-x: auto; }
.planilla-taula {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.85rem;
    background: var(--card-bg);
}
.planilla-taula caption {
    caption-side: top;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.04em;
    padding: 0.5rem 0;
    text-align: left;
}
.planilla-taula th,
.planilla-taula td {
    border: 1px solid var(--border);
    padding: 0.3rem 0.6rem;
    text-align: left;
    vertical-align: middle;
}
.planilla-taula thead th {
    text-align: center;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.planilla-taula tr.pt-zona th {
    text-align: center;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    padding: 0.6rem 0.35rem 0.5rem;
    background: var(--primary-soft);
    border-top: 3px solid var(--primary);
}
.planilla-taula .pt-sep { border-left: 3px solid var(--muted); }

/* Separador més gruixut i fosc entre un lloc i el següent, i fons alternat
   per fila perquè es pugui seguir amb la vista d'esquerra a dreta. Aquest fons
   alternat és PER FILA (0,0,3,1 d'especificitat): les regles de reforç/inactiu
   de sota fan servir `!important` perquè guanyin sempre, tant si la cel·la
   cau en una fila «a» com «b» —abans hi havia reforços que es veien grisos
   enlloc de grocs només perquè la seva fila era «b». */
.planilla-taula tr.pt-fila-lloc > td { border-bottom: 2px solid #374151; }
.planilla-taula tr.pt-fila-lloc.pt-fila-b > td { background: #f7f8fa; }
.pt-nom-input { font-weight: 700; }

.pt-nomcol { min-width: 12rem; }
.pt-lloc-nom.pt-reforc { font-size: 0.75rem; color: var(--muted); }

.pt-cfg { white-space: nowrap; text-align: center; }
.pt-horari label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0 0.35rem;
    font-size: 0.82rem;
}
.pt-cfg select { padding: 0.15rem 0.3rem; font-size: 0.85rem; }

.pt-estat {
    display: block;
    font-size: 0.72rem;
    line-height: 1.2;
    min-height: 1em;
    margin-top: 0.15rem;
}
.pt-estat.pt-desant { color: var(--muted); }
.pt-estat.pt-desat { color: var(--primary); }
.pt-estat.pt-error { color: var(--error-text); }

/* -------- Importació de fitxes des d'Excel: columnes reconegudes -------- */
/* Avís de la previsualització d'importació: columna de l'Excel que s'ignora. */
.avis-import { color: var(--pot); background: var(--pot-bg); border-radius: 6px; padding: 0.45rem 0.7rem; font-size: 0.88rem; }
.import-cols { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.import-cols li { margin: 0.2rem 0; font-size: 0.9rem; }
/* Supervisor/a per defecte de les fitxes noves, a la previsualització de la importació. */
.import-supervisor-defecte { border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.8rem 0.7rem; margin: 0.6rem 0 0.9rem; }
.import-supervisor-defecte legend { font-weight: 700; padding: 0 0.3rem; }
/* Casella «Ignora les cel·les buides» i el que s'esborrarà si es desmarca. */
.import-ignora-buides { margin: 0.2rem 0 0.8rem; font-weight: 600; }
.import-esborra { color: var(--error-text); font-weight: 600; }
.import-col-falta { color: var(--error-text); font-weight: 600; }

/* -------- «Estructura planilla»: edició (Fase 1) --------
   Capçalera de zona editable (nom + interruptor actiu + reordenar + eliminar),
   i cada cel·la de lloc amb els seus propis controls (fila, columna, nom,
   actiu, formacions requerides, eliminar). Un lloc o una zona inactius es
   pinten en gris perquè es distingeixin d'un cop d'ull, sense confondre's amb
   un lloc marcat «No». */
.pt-zona-cap {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}
.pt-zona-cap .pt-zona-nom {
    flex: 1;
    min-width: 10rem;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.03em;
    text-align: left;
    padding: 0.2rem 0.4rem;
}
.pt-zona-accions { display: inline-flex; align-items: center; gap: 0.1rem; white-space: nowrap; }
.pt-zona-accions form { display: inline; }
.pt-zona-accions .btn-link { padding: 0.1rem 0.3rem; font-size: 0.9rem; }
.pt-zona-accions .btn-link:disabled { color: var(--muted); cursor: default; text-decoration: none; }
.pt-zona-elimina { color: var(--error-text); }
tr.pt-zona-inactiva { opacity: 0.55; }
tr.pt-zona-inactiva .pt-zona-nom { text-decoration: line-through; text-decoration-color: var(--muted); }

.pt-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.78rem;
    font-weight: 400;
    white-space: nowrap;
    cursor: pointer;
}
.pt-toggle input { width: auto; margin: 0; }

.pt-nomcol { min-width: 14rem; vertical-align: top; }
/* Reforç: fons propi molt suau perquè es distingeixi de seguida d'un obligatori,
   més una franja de 4px al costat esquerre de la seva primera cel·la i una
   etiqueta «REFORÇ» al costat del nom (perquè no depengui només del color).
   Inactiu: gris i text apagat; es declara després perquè guanyi si un lloc és
   alhora reforç i inactiu. Totes dues s'apliquen a les 6 cel·les del lloc
   (`data-lloc-cel`), no només al nom, amb `!important`: sense això, el fons
   alternat per fila (més amunt, més específic perquè encadena 3 classes) les
   guanyava a les files «b» i els reforços de la fila 2 es veien grisos.
   `box-shadow: inset` en lloc de `border-left` perquè no competeixi amb el
   `border-left` de `.pt-sep` (el separador INFERMERIA/TCAI) al mateix costat. */
td.pt-reforc { background: var(--reforc-bg) !important; }
.pt-nomcol.pt-reforc { box-shadow: inset 4px 0 0 var(--reforc); }
.pt-badge-reforc {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0 0.35rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
    background: var(--reforc);
    border-radius: 3px;
    vertical-align: middle;
}
td.pt-lloc-inactiu { opacity: 0.5; background: var(--bg) !important; }
.pt-nomcol.pt-lloc-inactiu .pt-nom-input { text-decoration: line-through; text-decoration-color: var(--muted); }
.pt-tipus { min-width: 6.5rem; }

/* Destaca uns segons el lloc o la zona a què torna la pàgina després
   d'afegir, moure o eliminar (vegeu l'script de baix): mai es queda dalt de
   tot sense indicar on ha anat a parar el canvi. La transició, sempre present
   a l'element, fa que s'esvaeixi sol en treure la classe `pt-destacat`. */
.pt-nomcol, .planilla-taula tr.pt-zona > th { transition: background-color 1s ease; }
.pt-destacat { background-color: #fff3b0 !important; }

.pt-lloc-fila1 { display: flex; gap: 0.3rem; margin-bottom: 0.2rem; }
.pt-fila { width: 3.2rem; padding: 0.15rem 0.25rem; font-size: 0.8rem; }
.pt-columna { flex: 1; padding: 0.15rem 0.25rem; font-size: 0.72rem; }
.pt-nom-input { width: 100%; padding: 0.2rem 0.35rem; font-size: 0.85rem; margin-bottom: 0.25rem; }

.pt-lloc-fila3 { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.pt-lloc-elimina { color: var(--error-text); padding: 0 0.2rem; }

.pt-formacions { font-size: 0.78rem; position: relative; }
.pt-formacions summary { cursor: pointer; color: var(--primary); list-style: none; }
.pt-formacions summary::-webkit-details-marker { display: none; }
.pt-formacions[open] summary { font-weight: 600; }
.formacions-pop {
    position: absolute;
    z-index: 5;
    top: 100%;
    left: 0;
    min-width: 14rem;
    max-height: 14rem;
    overflow-y: auto;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    padding: 0.5rem;
    margin-top: 0.2rem;
}
.formacions-llista { display: flex; flex-direction: column; gap: 0.2rem; }
.formacions-item { display: flex; align-items: center; gap: 0.35rem; font-weight: 400; white-space: normal; }
.formacions-item input { width: auto; margin: 0; }
.formacions-avis { color: var(--primary-dark); font-size: 0.75rem; margin: 0 0 0.3rem; }
.formacions-nova { display: flex; gap: 0.3rem; margin-top: 0.4rem; border-top: 1px solid var(--border); padding-top: 0.4rem; }
.formacions-nova input { flex: 1; padding: 0.15rem 0.3rem; font-size: 0.78rem; }

tr.pt-afegeix td { background: var(--bg); text-align: center; padding: 0.3rem; }
tr.pt-afegeix .btn-link { font-size: 0.8rem; }

.pt-nova-zona { display: flex; gap: 0.5rem; align-items: center; margin-top: 1rem; max-width: 24rem; }
.pt-nova-zona input { flex: 1; }

.pt-qui-hi-pot { font-size: 0.72rem; padding: 0.05rem 0.3rem; }

/* -------- «Qui hi pot anar»: marcar Sí/No d'un lloc des del seu propi costat -------- */
.qhpa-capcalera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.2rem;
    margin-bottom: 0.5rem;
}
.qhpa-capcalera input[type="search"] { flex: 1 1 16rem; min-width: 12rem; }
.qhpa-massiu { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.qhpa-massiu form { display: inline; }
.qhpa-massiu-etiqueta { font-size: 0.85rem; color: var(--muted); margin-right: 0.2rem; }
.qhpa-comptador { font-weight: 600; font-size: 0.9rem; margin: 0 0 0.6rem; }

.qhpa-llista { list-style: none; margin: 0; padding: 0; }
.qhpa-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--border);
}
.qhpa-item:last-child { border-bottom: none; }
.qhpa-nom { font-size: 0.92rem; }
.qhpa-tria { flex: 0 0 auto; }

/* -------- «Historial d'ubicacions» (fitxa del professional) -------- */
.historial-filtre { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; margin-bottom: 0.5rem; }
.historial-filtre label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.82rem; color: var(--muted); }
.historial-zona { margin-top: 0.6rem; }
.historial-total {
    display: inline-block;
    background: var(--primary-soft);
    color: var(--primary-dark);
    border-radius: 999px;
    padding: 0.05rem 0.55rem;
    font-size: 0.78rem;
    font-weight: 700;
    margin-left: 0.3rem;
}

/* -------- Estat «Pot (només si cal)» de la rotació -------- */
/* Assignació d'una planilla que ha sortit d'un «Pot»: fons ambre i etiqueta. */
.cel-assignat.cel-pot { background: var(--pot-bg); box-shadow: inset 3px 0 0 var(--pot); }
.marca-pot {
    display: inline-block;
    color: var(--pot);
    background: #fff;
    border: 1px solid var(--pot);
    border-radius: 999px;
    padding: 0 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.3;
    vertical-align: middle;
    white-space: nowrap;
}
.marca-pot[hidden] { display: none; }
.historial-total-pot { background: var(--pot-bg); color: var(--pot); }
.historial-pot-titol { margin-top: 1.2rem; }
.pt-normes { margin-top: 1.5rem; }
.pt-normes h3 { margin-top: 0; }
.pt-normes-llista { margin: 0.4rem 0 0; padding-left: 1.2rem; font-size: 0.9rem; }
.pt-normes-llista li { margin-bottom: 0.45rem; }

/* Ajustos de la rotació (Estructura planilla) */
.pt-rotacio { margin-bottom: 1rem; }
.pt-rotacio h3 { margin-top: 0; }
.pt-rot-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0.6rem 0 0; }
.pt-rot-fila input[type="number"] { width: 4.5rem; }
.pt-nom-servei input[type="text"] { width: min(24rem, 100%); }
.pt-rot-principal { font-size: 0.95rem; }
.pt-rot-atalls { display: inline-flex; gap: 0.15rem; }
.pt-rotacio .hint { margin: 0.2rem 0 0.4rem; }

.pt-zona-lloc { max-width: 8.5rem; font-size: 0.75rem; padding: 0.1rem 0.2rem; }

/* -------- Estructura planilla: columnes de la fulla (Revisió ACR/PIXYS, Torn sopar) -------- */
.pt-fulla-interruptor { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; margin: 0.6rem 0; }
.pt-fulla-interruptor .hint { margin: 0; flex: 1 1 22rem; }
.planilla-taula .pt-fulla { display: none; }
.pt-mostra-fulla .planilla-taula th.pt-fulla,
.pt-mostra-fulla .planilla-taula td.pt-fulla { display: table-cell; }
.pt-fulla input { width: 7.5rem; padding: 0.15rem 0.3rem; font-size: 0.85rem; text-align: center; }

.avis-disseny { border-color: var(--error-text); background: var(--error-bg); color: var(--error-text); }
.avis-disseny ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }

/* -------- Planilla: panell de treball (només pantalla) i notes del full -------- */
.pt-panell { border: 2px dashed var(--muted); background: repeating-linear-gradient(135deg, #fafbfc, #fafbfc 12px, #f3f5f7 12px, #f3f5f7 24px); }
.pt-panell-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.pt-panell-cap h3 { margin: 0; }
.pt-panell-etiqueta { background: var(--muted); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.2rem 0.6rem; border-radius: 999px; }
.pt-panell-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; }
.pt-panell-col { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.9rem; }
.pt-panell-col h4 { margin: 0 0 0.3rem; font-size: 0.95rem; letter-spacing: 0.05em; }
.pt-panell-col h5 { margin: 0.7rem 0 0.25rem; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.pt-comptador { background: var(--primary-soft); color: var(--primary-dark); border-radius: 999px; padding: 0 0.5rem; margin-left: 0.3rem; font-weight: 700; }
.pt-persones { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.pt-persona { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.7rem; padding: 0.25rem 0.4rem; border-radius: 6px; border: 1px solid var(--border); }
.pt-denari { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.15rem; font-weight: 800; color: var(--primary-dark); background: var(--primary-soft); padding: 0 0.45rem; border-radius: 4px; user-select: all; }
.pt-persona-nom { font-weight: 600; }
.pt-motiu { flex-basis: 100%; font-size: 0.75rem; color: var(--muted); }
.pt-persona.pt-collocada { opacity: 0.45; background: var(--bg); }
.pt-persona.pt-collocada .pt-persona-nom, .pt-persona.pt-collocada .pt-denari { text-decoration: line-through; }
.pt-buit { margin: 0; color: var(--muted); font-size: 0.85rem; }
.pt-panell-sense-cat { margin-top: 1rem; }
.pt-notes .pt-nota { display: block; width: 100%; margin: 0.4rem 0; font-size: 1rem; }

/* -------- Avisos de restriccions dures a la planilla (només pantalla) -------- */
/* Una assignació que se salta una restricció (marca, categoria, horari, nivell,
   formació) es permet però es veu: vora i fons vermells i el motiu a la cel·la. */
.cel-assignat.cel-incompleix { background: #fff0ef; box-shadow: inset 4px 0 0 var(--error-text); }
.cel-incompliment {
    display: block;
    margin-top: 0.15rem;
    color: var(--error-text);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: normal;
}
.cel-incompliment[hidden] { display: none; }
.avis-incompliments { border: 2px solid var(--error-text); background: var(--error-bg); }
.avis-incompliments[hidden] { display: none; }
.avis-incompliments h3 { margin: 0; color: var(--error-text); }
.avis-incompliments ul { margin: 0.5rem 0 0; padding-left: 1.2rem; }
.avis-incompliments li { margin: 0.2rem 0; }
.cel-assignat.cel-flaix { outline: 3px solid var(--error-text); outline-offset: -3px; }
@media print { .avis-incompliments, .cel-incompliment { display: none !important; } }

/* Comprovació que ningú no es perd (només pantalla; mai a l'Excel ni al PDF) */
.avis-desapareguts { border: 3px solid var(--error-text); background: var(--error-bg); color: var(--error-text); }
.avis-desapareguts[hidden], .avis-sense-lloc[hidden] { display: none; }
.avis-desapareguts h3 { margin: 0; font-size: 1.25rem; }
.avis-desapareguts ul { margin: 0.5rem 0 0; padding-left: 1.2rem; font-weight: 700; }
.avis-desapareguts ul:empty { display: none; }
.avis-sense-lloc { border: 2px solid #e0a030; background: #fff4e0; color: #7a4f00; }
.pt-suma { margin: 0.6rem 0 0.2rem; font-weight: 700; }
.pt-suma #suma-marca { margin-left: 0.6rem; color: var(--primary-dark); }
.pt-suma.pt-suma-error, .pt-suma.pt-suma-error #suma-marca { color: var(--error-text); }
.pt-persona.pt-perduda { border-color: #e0a030; border-left-width: 5px; background: #fff4e0; }
.pt-persona.pt-perduda .pt-motiu { color: #7a4f00; font-weight: 600; }
.pt-buit[hidden] { display: none; }
@media print { .avis-desapareguts, .avis-sense-lloc, .pt-suma { display: none !important; } }

/* Marca manual (Pendent / Ubicat manualment / Festa extra / Baixa) al panell de treball
   i a l'apartat «Incidències» (només pantalla) */
.pt-marca-input { flex-basis: 100%; font-size: 0.78rem; color: var(--muted); padding: 0.1rem 0.2rem; }
.pt-persona.pt-manual .pt-marca-input { color: var(--primary-dark); font-weight: 700; }

/* -------- Apartat «Incidències» (només pantalla; mai a l'Excel ni al PDF) -------- */
.pt-incidencies .hint { margin-top: 0.5rem; }
.pt-incidencies-llista { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.pt-incidencia { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.7rem; padding: 0.25rem 0.4rem; border-radius: 6px; border: 1px solid var(--border); }
.pt-incidencia-cat { font-size: 0.75rem; font-weight: 700; color: var(--muted); }
.pt-incidencia-motiu { font-size: 0.8rem; font-weight: 600; }
.pt-incidencia-origen { margin-left: auto; font-size: 0.72rem; color: var(--muted); }
@media print { .pt-panell, .pt-incidencies { display: none !important; } }

/* Obligatoris sense cobrir i per què (només pantalla; mai a l'Excel ni al PDF) */
.avis-sense-cobrir { border: 2px solid var(--error-text); background: var(--error-bg); }
.avis-sense-cobrir[hidden] { display: none; }
.avis-sense-cobrir h3 { margin: 0; color: var(--error-text); }
.avis-sense-cobrir ul { margin: 0.5rem 0 0; padding-left: 1.2rem; }
.avis-sense-cobrir li { margin: 0.35rem 0; }
.sc-etiqueta { display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.05rem 0.5rem; border-radius: 999px; margin: 0 0.4rem; }
.sc-real .sc-etiqueta { background: var(--error-text); color: #fff; }
.sc-podria .sc-etiqueta { background: #e0a030; color: #3a2600; }
.sc-motiu { display: block; font-size: 0.85rem; color: var(--text); }
@media print { .avis-sense-cobrir { display: none !important; } }
.sc-fitxa .sc-etiqueta { background: #2f5d8a; color: #fff; }

/* Bloc «Normes d'assignació» (per a la supervisora; text que surt del codi de cada regla) */
.pt-norma-seccio { margin-top: 1.1rem; padding-top: 0.6rem; border-top: 1px solid var(--border); }
.pt-norma-seccio h4 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.pt-normes-llista { margin: 0.4rem 0 0; padding-left: 1.3rem; }
.pt-normes-llista li { margin: 0.5rem 0; }
.pt-norma-general { margin: 0.5rem 0; }
.pt-norma-estat { display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; padding: 0.05rem 0.55rem; border-radius: 999px; margin-left: 0.3rem; vertical-align: 0.05em; }
.pt-norma-on { background: var(--primary-soft); color: var(--primary-dark); }
.pt-norma-off { background: var(--border); color: var(--muted); }

/* -------- «Pacients avui»: dotació automàtica per zona -------- */
.pt-pacients { margin-bottom: 1rem; }
.pt-pacients h3 { margin-top: 0; }
.pt-pacients-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
    gap: 0.7rem;
    margin-top: 0.6rem;
}
.pt-pacients-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card-bg);
}
.pt-pacients-nom { font-size: 1rem; font-weight: 700; color: var(--text); }
.pt-pacients-input { width: 4.5rem; padding: 0.25rem 0.4rem; font-size: 0.95rem; }
.pt-pacients-resultat-bloc { display: flex; flex-direction: column; gap: 0.15rem; }
.pt-pacients-resultat { font-size: 0.78rem; color: var(--muted); }
.pt-pacients-avis { font-size: 0.78rem; color: var(--error-text); font-weight: 600; }
.pt-pacients-pendent { font-size: 0.72rem; font-weight: 700; color: var(--pot); text-transform: uppercase; letter-spacing: 0.02em; }
.pt-pacients-card.pt-pacients-tancada { background: #eceff1; }
.pt-pacients-card.pt-pacients-tancada .pt-pacients-nom { color: var(--muted); }
.pt-pacients-card.pt-pacients-dirty { border-color: var(--pot); background: var(--pot-bg); }
.pt-pacients-aplica { margin-top: 0.8rem; }
@media (max-width: 520px) {
    .pt-pacients-grid { grid-template-columns: 1fr; }
}

/* -------- Regla de dotació d'una zona (dins la capçalera, a «Estructura planilla») -------- */
.pt-dotacio { margin-top: 0.4rem; font-weight: 400; text-transform: none; letter-spacing: normal; font-size: 0.82rem; }
.pt-dotacio summary { cursor: pointer; color: var(--primary); list-style: none; }
.pt-dotacio summary::-webkit-details-marker { display: none; }
.pt-dotacio[open] summary { font-weight: 600; }
.pt-dotacio-form { display: flex; flex-direction: column; gap: 0.5rem; max-width: 32rem; margin-top: 0.4rem; }
.pt-dotacio-form .hint { margin: 0; }
.pt-dotacio-form label { display: block; font-size: 0.8rem; font-weight: 600; }
.pt-dotacio-form input, .pt-dotacio-form select, .pt-dotacio-form textarea {
    display: block; margin-top: 0.15rem; width: 100%; max-width: 14rem; padding: 0.2rem 0.35rem; font-size: 0.82rem;
}
.pt-dotacio-form textarea { max-width: 18rem; font-family: monospace; }
.pt-dotacio-camps { flex-wrap: wrap; gap: 0.6rem 1rem; }
.pt-dotacio-ratio, .pt-dotacio-taula, .pt-dotacio-tcai { display: none; }
.pt-dotacio-form.pt-mostra-ratio .pt-dotacio-ratio { display: flex; }
.pt-dotacio-form.pt-mostra-taula .pt-dotacio-taula { display: block; }
.pt-dotacio-form.pt-mostra-ratio .pt-dotacio-tcai,
.pt-dotacio-form.pt-mostra-taula .pt-dotacio-tcai { display: block; }

/* =====================================================================
   Planilla diària: els tres estats visibles d'un dia
   IMPORTADA (gris) · ESBORRANY (taronja) · CONFIRMADA (verd)
   ===================================================================== */
:root {
    --estat-importada: #6b7280;
    --estat-esborrany: #c25e00;
    --estat-esborrany-bg: #fff3e2;
    --estat-confirmada: #1f7a3d;
    --estat-confirmada-bg: #e3f4e8;
}
.estat {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #fff;
    vertical-align: middle;
    white-space: nowrap;
}
.estat-importada { background: var(--estat-importada); }
.estat-esborrany { background: var(--estat-esborrany); }
.estat-confirmada { background: var(--estat-confirmada); font-size: 0.85rem; }
h1 .estat { font-size: 0.8rem; margin-left: 0.5rem; }
.nowrap { white-space: nowrap; }

/* «Les meves planilles» */
.dies-filtres { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 1rem; margin: 0.8rem 0 1rem; }
.dies-filtres .field { margin: 0; min-width: 12rem; }
.dies-filtres-n { margin-left: auto; color: var(--muted); font-size: 0.85rem; }
.dies-taula td { vertical-align: middle; }
.dies-taula tr.fila-confirmada, .dies-taula tr.fila-confirmada:hover { background: var(--estat-confirmada-bg); }
.dies-taula tr.fila-confirmada td { border-bottom-color: #c5e6cf; }
.dies-taula tr.dia-avui { box-shadow: inset 6px 0 0 var(--primary); font-weight: 600; }
.dies-taula tr.dia-avui:not(.fila-confirmada) { background: var(--primary-soft); }
.dia-avui-etiqueta { display: inline-block; margin-left: 0.5rem; background: var(--primary); color: #fff; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; padding: 0.1rem 0.5rem; border-radius: 4px; vertical-align: 0.1em; }

/* ESBORRANY amb la rotació vella: línia d'avís taronja (a la llista i a dalt del dia) */
.fila-avis-rotacio td { background: var(--estat-esborrany-bg); border-top: none; padding-top: 0.2rem; }
.avis-rotacio-text { color: #8a4300; font-weight: 600; margin-right: 0.8rem; }
.linia-avis-rotacio { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 1rem; padding: 0.6rem 0.9rem; background: var(--estat-esborrany-bg); border: 1px solid var(--estat-esborrany); border-left-width: 6px; border-radius: 8px; }
.btn-avis-rotacio { background: var(--estat-esborrany); border-color: var(--estat-esborrany); color: #fff; padding: 0.25rem 0.75rem; font-size: 0.88rem; }
.btn-avis-rotacio:hover { background: #9a4a00; border-color: #9a4a00; color: #fff; text-decoration: none; }

/* «Crear planilla»: resum del fitxer, ja desat */
.imp-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 1.2rem; }
.imp-form .field { margin: 0; min-width: 16rem; }
.imp-form .form-actions { margin: 0; }
.imp-taula td { vertical-align: middle; }
.imp-fila { cursor: pointer; }
.imp-fila.fila-confirmada, .imp-fila.fila-confirmada:hover { background: var(--estat-confirmada-bg); }
.imp-check input { width: 1.15rem; height: 1.15rem; }
.imp-plega::before { content: "▸"; display: inline-block; color: var(--muted); transition: transform 0.15s; }
.imp-obert .imp-plega::before { transform: rotate(90deg); }
.imp-detall { display: none; }
.imp-obert .imp-detall { display: table-row; }
.imp-detall > td { background: #fafbfc; }
.imp-detall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.8rem; }
.imp-detall-grid h4 { margin: 0 0 0.3rem; font-size: 0.85rem; letter-spacing: 0.03em; }
.imp-n { background: var(--primary-soft); color: var(--primary-dark); border-radius: 999px; padding: 0 0.5rem; font-weight: 700; }
.imp-persones { list-style: none; margin: 0; padding: 0; font-size: 0.85rem; display: flex; flex-direction: column; gap: 0.15rem; }
.imp-persones .pt-denari { font-size: 0.85rem; }
.imp-codi { display: inline-block; margin-right: 0.35rem; padding: 0 0.4rem; border-radius: 4px; background: var(--border); font-size: 0.78rem; font-weight: 700; }
.imp-perdua { color: #8a4300; font-weight: 700; }
.imp-confirmada > td { background: var(--estat-confirmada-bg); }
.imp-confirmada-avis { margin: 0; border-color: var(--estat-confirmada); }
.imp-fila.fila-esborrany, .imp-fila.fila-esborrany:hover { background: var(--estat-esborrany-bg); }
.imp-esborrany > td { background: var(--estat-esborrany-bg); }
.imp-esborrany-avis { margin: 0; border-color: var(--estat-esborrany); }
.imp-desat { color: var(--estat-confirmada); font-weight: 700; margin-left: 0.3rem; }
.imp-form-fila { margin: 0; }
.imp-avis-ok { border-color: var(--estat-confirmada); background: var(--estat-confirmada-bg); }
.imp-avis-ok p { margin: 0; }

/* Planilla: desat automàtic de l'esborrany («Desant…» / «Desat ✓ hh:mm» al costat de l'estat) */
.autodesat { margin-left: 0.6rem; font-size: 0.85rem; font-weight: 600; color: var(--muted); vertical-align: middle; white-space: nowrap; }
.autodesat-ok { color: var(--estat-confirmada); }
.autodesat-error { color: var(--error-text); font-weight: 800; }
.autodesat-avis { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 50; margin: 0; max-width: 48rem; margin-inline: auto;
    background: var(--error-bg); border: 2px solid var(--error-text); color: var(--error-text); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18); }
.autodesat-avis[hidden] { display: none; }
.autodesat-avis p { margin: 0 0 0.5rem; }

/* Paperera: esborrar un dia, confirmació i llista de dies esborrats */
.icona-paperera { vertical-align: -0.15em; }
.dies-accions { text-align: right; }
.btn-paperera { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin-left: 0.4rem; border-radius: 6px; color: var(--muted); vertical-align: middle; }
.btn-paperera:hover, .btn-paperera:focus-visible { color: var(--error-text); background: var(--error-bg); text-decoration: none; }
.btn-esborra-dia { color: var(--error-text); }
.esborra-card { border-left: 6px solid var(--muted); }
.esborra-card.esborra-confirmada { border: 2px solid var(--error-text); border-left-width: 8px; background: var(--error-bg); }
.esborra-titol { font-size: 1.05rem; margin-top: 0; }
.esborra-confirmada .esborra-titol { color: var(--error-text); font-weight: 700; }
.esborra-perdues li { margin-bottom: 0.25rem; }
.esborra-paraula { max-width: 18rem; }
.esborra-paraula input { font-weight: 700; letter-spacing: 0.08em; }
.btn-danger:disabled { opacity: 0.45; cursor: not-allowed; }
.paperera-accions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.3rem 0.6rem; }
.paperera-accions form { margin: 0; }
.paperera-elimina { color: var(--error-text); }
.btn-secondary:disabled { opacity: 0.45; cursor: not-allowed; }
.enllac-paperera { text-align: right; margin: 0.4rem 0 0; font-size: 0.85rem; }
.enllac-paperera a { color: var(--muted); }
.enllac-paperera a:hover { color: var(--text); }

/* Avís d'error al costat d'on s'ha premut (avisaErrorAprop, a base.html). Flota per
   sobre de tot i no mou res de la pàgina; es queda fins que es tanca. */
.avis-error-flotant {
    position: fixed; z-index: 80;
    display: flex; align-items: flex-start; gap: 0.45rem;
    max-width: min(22rem, calc(100vw - 16px));
    padding: 0.5rem 0.55rem 0.5rem 0.7rem;
    background: var(--error-text); color: #fff;
    border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    font-size: 0.88rem; font-weight: 600; line-height: 1.35;
}
.avis-error-icona { flex: 0 0 auto; }
.avis-error-text { flex: 1 1 auto; }
.avis-error-tanca {
    flex: 0 0 auto; padding: 0 0.2rem; margin-left: 0.2rem;
    background: none; border: 0; color: #fff; font-size: 0.95rem; line-height: 1.35; cursor: pointer; opacity: 0.85;
}
.avis-error-tanca:hover, .avis-error-tanca:focus-visible { opacity: 1; outline: 1px solid #fff; border-radius: 3px; }

/* -------- Mòdul «Formacions» (catàleg, una formació, fusionar) -------- */
.avis-ok {
    background: var(--primary-soft); color: var(--primary-dark);
    padding: 0.5rem 0.9rem; border-radius: 6px; margin: 0 0 1rem; font-weight: 600;
}
.check-en-linia {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-weight: 400; font-size: 0.9rem; color: var(--text); cursor: pointer; margin: 0;
}
.check-en-linia input { width: auto; margin: 0; }
.cataleg-taula tbody tr { cursor: default; }
.cataleg-taula tbody tr:hover { background: none; }
.cataleg-desc { font-size: 0.8rem; color: var(--muted); margin-top: 0.15rem; max-width: 28rem; }
.cataleg-meves { font-size: 0.8rem; color: var(--muted); }
.cataleg-creada { font-size: 0.82rem; color: var(--muted); white-space: nowrap; }
/* Cerca i estat del catàleg (formacions.html): filtren al navegador. */
.cf-compte { min-height: 1.6rem; display: flex; align-items: center; }
.cf-fila[hidden], .cf-grup[hidden] { display: none; }
/* Fusionar i registre: enllaços discrets al final del catàleg. */
.cataleg-mes { margin: 1.5rem 0 0.5rem; font-size: 0.85rem; color: var(--muted); }
.cataleg-mes a { color: var(--muted); }
.cataleg-mes a:hover { color: var(--primary); }
.fusio-cerca-barra { margin-bottom: 0.6rem; }
.cataleg-fusions { margin: 0; padding-left: 1.2rem; font-size: 0.9rem; }
.cataleg-fusions li { margin: 0.25rem 0; }
.formacio-nova-cataleg > summary { list-style: none; cursor: pointer; }
.formacio-nova-cataleg > summary::-webkit-details-marker { display: none; }
.formacio-nova-cataleg > summary h3 { display: inline; color: var(--primary); }
.formacio-nova-cataleg[open] > summary { margin-bottom: 0.8rem; }
.assigna-barra { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.assigna-amagats { font-size: 0.85rem; color: var(--muted); }
/* Assignar des del catàleg: data amb etiqueta al costat del botó, i a sota què es posarà. */
.assigna-accio { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 0.8rem; }
.assigna-accio .assigna-data { margin: 0; }
.assigna-accio .assigna-data input { width: 11rem; }
.assigna-accio input[aria-invalid="true"] { border-color: var(--error-text); }
.assigna-resum { min-height: 1.4rem; margin: 0.5rem 0 0; font-size: 0.9rem; }
.assigna-resum strong { font-weight: 700; }
.assigna-resum-error { color: var(--error-text); font-weight: 600; }
/* Actualitzar l'any dels que ja la tenen: casella sota la data, i pas de confirmació
   amb la llista de qui canvia (formacio.html, formacio_assigna). */
.assigna-actualitza { margin-top: 0.6rem; }
.tenen-hint { margin: 0; font-size: 0.82rem; }
.assigna-previ {
    border: 2px solid var(--primary); border-radius: 8px; background: var(--primary-soft);
    padding: 0.8rem 1rem; margin: 0 0 1rem;
}
.assigna-previ:focus { outline: none; }
/* Que la barra superior fixa no en tapi el títol en portar-la a la vista. */
.assigna-previ, #form-assigna { scroll-margin-top: 5.5rem; }
.assigna-previ h4 { margin: 0 0 0.5rem; }
.assigna-previ p { margin: 0 0 0.5rem; }
.assigna-previ-taula { max-height: 18rem; overflow-y: auto; margin: 0.5rem 0 0.8rem; }
.assigna-previ-taula .prof-table th, .assigna-previ-taula .prof-table td { padding: 0.35rem 0.7rem; }
.assigna-previ-accio { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
/* Filtres de les llistes d'una formació (formacio.html): la barra és la dels llistats de
   fitxes; aquí només el que és propi. El comptador de sota té l'alçada fixa. */
.ff-compte { min-height: 1.6rem; display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.ff-compte .ff-neteja { font-size: inherit; padding: 0; }
.ff-fila[hidden] { display: none; }
.filtre-panel label.ff-any-fila { justify-content: space-between; }
.filtre-panel label.ff-any-fila input { width: 5.5rem; padding-top: 0.25rem; padding-bottom: 0.25rem; }
.filtre-panel label[hidden] { display: none; }
.assigna-llista {
    list-style: none; margin: 0 0 0.8rem; padding: 0.4rem 0.6rem;
    max-height: 22rem; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px;
    columns: 2 18rem; column-gap: 1.5rem;
}
.assigna-llista li { break-inside: avoid; padding: 0.15rem 0; }
.assigna-llista li[hidden] { display: none; }
.assigna-denari { font-size: 0.8rem; color: var(--muted); }
.fusio-opcio { display: flex; margin: 0.35rem 0; }
.formacio-retirada { font-size: 0.8em; color: var(--muted); }
.fusio-resultat .hint { margin-top: 0.8rem; }

/* ===========================================================================
   Mòbil i pantalles tàctils (tanda 1, 29/10). NOMÉS aparença: cap regla d'aquí canvia
   què fa cap botó ni cap camp. Dos blocs:
   - (pointer: coarse): pantalles que es fan servir amb el dit. Zona de toc mínima de
     44 × 44 px, encara que el dibuix sigui més petit (una àrea invisible ::after
     centrada, o una alçada mínima), i els textos tallats amb «…» es veuen sencers
     (no hi ha ratolí per passar-hi per sobre).
   - (max-width: 700px): pantalles estretes. Cap desplaçament horitzontal de la pàgina
     (les taules amples es desplacen DINS de .table-wrap), camps a tot l'ample i lletra
     de 16 px als camps (amb menys, el telèfon fa zoom en escriure).
   =========================================================================== */
@media (pointer: coarse) {
    /* Botons, enllaços amb aspecte de botó, desplegables i entrades del menú. */
    .btn, .view-toggle a, summary, .menu-entrada, .submenu a, .planilla-grup-btn { min-height: 44px; }
    .btn { display: inline-flex; align-items: center; justify-content: center; }
    .btn-link { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; }
    .planilla-grup-btn { min-width: 44px; }
    .fitxa-desarxiva { min-height: 44px; }
    .topbar .brand { min-height: 44px; }
    /* Camps i desplegables (no els de les graelles denses de la planilla, vegeu més avall). */
    select, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) { min-height: 44px; }
    .planilla-taula-wrap select, .planilla-taula-wrap input, .excel-planilla select, .excel-planilla input { min-height: 0; }
    /* Enllaços dins de taules (noms, dies…): zona de toc de 44 px d'alt sobre el mateix text. */
    table a:not(.btn) { position: relative; }
    table a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
    .assigna-llista label, .check-en-linia { min-height: 44px; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
    .pt-toggle { min-height: 44px; }
    /* Enllaços solts dins d'un paràgraf o d'una llista («Paperera», «Fusiona formacions»…). */
    main p a:not(.btn), main li > a:not(.btn) { position: relative; }
    main p a:not(.btn)::after, main li > a:not(.btn)::after {
        content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%);
    }
    .menu-entrada, .submenu a { display: flex; align-items: center; }
    .menu-boto { width: 44px; height: 44px; }
    .topbar .topbar-user .btn-link { min-height: 44px; }
    .filtre-menu > summary { min-height: 44px; }
    /* Caselles i opcions: tota l'etiqueta és la zona de toc. */
    .checkbox-item, .radio-group label, .cat-toggle, .filtre-panel label, .config-panel label { min-height: 44px; }
    input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; flex: 0 0 auto; }
    /* Icones petites (copiar el denari, arxivar, agafador d'arrossegar, color, retolador
       del comentari, obrir en gran, ⓘ, ✕, fletxes…): el dibuix no canvia, però la zona
       de toc és un quadrat invisible de 44 px centrat a la icona. */
    .copia-denari, .fitxa-arxiva, .color-boto, .resalta-boto, .comentari-gran, .ordre-agafa,
    .config-agafa, .formacio-treu, .avis-error-tanca, .pt-lloc-elimina, .btn-paperera { position: relative; }
    .copia-denari::after, .fitxa-arxiva::after, .color-boto::after, .resalta-boto::after,
    .comentari-gran::after, .ordre-agafa::after, .config-agafa::after, .formacio-treu::after,
    .avis-error-tanca::after, .pt-lloc-elimina::after, .btn-paperera::after {
        content: ""; position: absolute; left: 50%; top: 50%;
        width: 44px; height: 44px; transform: translate(-50%, -50%);
    }
    .info-vinc::before { inset: auto; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
    /* Perquè les zones de 44 px no es trepitgin: més separació entre icones veïnes. */
    .ordre-controls { gap: 1.6rem; padding: 0 0.6rem; }
    .comentari-cel { gap: 0.9rem; }
    .comentari-mostra, .contractes-edit { min-height: 44px; }
    .comentari-mostra { display: inline-flex; align-items: center; }
    .vinc-edit { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    /* Textos tallats amb «…» (que amb ratolí es llegeixen passant-hi per sobre): amb el
       dit, sencers. */
    .cel-tallada, .contractes-text, .comentari-lectura, .formacio-chip-nom {
        white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere;
    }
    .formacio-chip { max-width: 100%; white-space: normal; }
    /* Amb el text sencer, la línia de contracte o de borsa creix (abans tenia l'alçada d'una
       sola línia i les línies es trepitjaven). */
    .contractes-l { height: auto; align-items: flex-start; }
    .contractes-l .tag-sense-contracte, .contractes-l .contracte-obert, .contractes-l .alerta-icona { margin-top: 0.1em; }
    /* Les taules només es desplacen de costat: amb les zones de toc de 44 px que sobresurten
       de la darrera fila, el contenidor es podia desplaçar uns píxels en vertical i, en
       lliscar el dit per sobre de la taula, la pàgina no baixava. */
    .table-wrap, .planilla-taula-wrap { overflow-y: hidden; }
}

@media (max-width: 700px) {
    /* Lletra de 16 px als camps: amb menys, el telèfon s'apropa sol en escriure. */
    input, select, textarea { font-size: 16px !important; }
    /* Camps a tot l'ample, amb aire entre ells. */
    .field-grid, .fitxa-grid { grid-template-columns: 1fr; gap: 1rem; }
    .fitxa-grid > .fitxa-linia { flex-direction: column; align-items: stretch; }
    .field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea { width: 100%; }
    /* El comptador de fitxes tenia reservat l'ample del seu text més llarg (43em): aquí
       ocupa la línia i prou (era el que feia la pàgina de 605 px). */
    .sota-barra .result-count { flex: 1 1 100%; }
    /* «La meva planilla» (fitxa): les opcions de cada lloc passen a sota del nom. */
    .planilla-lloc { flex-wrap: wrap; gap: 0.3rem 1rem; }
    .planilla-lloc-tria { flex: 1 1 100%; }
    /* Desplegables de filtre: a tot l'ample de la barra de filtres, a sota del botó (mai
       fora de la pantalla). */
    .toolbar { position: relative; }
    .filtre-menu { position: static; }
    .filtre-panel { top: auto; left: 0.5rem; right: 0.5rem; width: auto; margin-top: 5px; }
    .toolbar-extra { flex-wrap: wrap; min-width: 0; max-width: 100%; }
    /* Sense el filtre de suplents, la seva línia no reserva lloc (en canviar de filtre la
       pàgina es torna a carregar igualment). */
    .toolbar-extra.amagat { display: none; }
    .sota-barra { min-height: 0; }
    /* Els textos ocults per a lectors de pantalla de dins d'una taula es queden dins del seu
       contenidor (sense això, en sortien i eixamplaven la pàgina). */
    .table-wrap, .planilla-taula-wrap { position: relative; }
    /* Taules sense contenidor de desplaçament propi: es desplacen elles mateixes. */
    table:not(.table-wrap table):not(.planilla-taula-wrap table) { display: block; max-width: 100%; overflow-x: auto; }
    /* Llistes per marcar professionals (formacions): una sola columna. */
    .assigna-llista { columns: auto; }
    /* Avisos i «Desat ✓»: dins de la pantalla. */
    .copia-denari-avis { white-space: normal; max-width: calc(100vw - 32px); }
    .pt-estat { white-space: normal; }
}

/* El botó «Tanca» dels quadres només fa falta al mòbil. */
.quadre-tanca { display: none; }

/* ===========================================================================
   Mòbil, tanda 2 (29/10): les llistes de professionals. Només aparença; la vista
   (targetes o llista) és la que triï cadascú, com sempre.
   =========================================================================== */
@media (max-width: 700px) {
    /* ---- Barra de filtres: compacta. El formulari no canvia (display: contents només
       en treu la caixa); els seus elements i l'engranatge es col·loquen en una graella:
       cerca · categoria i vinculació · àrees, servei i ⚙ · vista. ---- */
    .toolbar-wrap {
        display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; gap: 0.45rem;
        position: relative; background: var(--card-bg); border: 1px solid var(--border);
        border-radius: 8px; padding: 0.5rem;
    }
    .toolbar-wrap > .toolbar { display: contents; }
    .toolbar-cerca { grid-column: 1 / -1; display: flex; gap: 0.4rem; }
    .toolbar-cerca input { flex: 1 1 auto; min-width: 0; }
    .toolbar-categories { gap: 0.35rem; flex-wrap: nowrap; }
    .toolbar-cerca { grid-row: 1; }
    .toolbar-categories:nth-of-type(2) { grid-column: 1; grid-row: 2; }
    .toolbar-categories:nth-of-type(3) { grid-column: 2 / -1; grid-row: 2; }
    /* Els botons de categoria i vinculació es veuen marcats pel color: la casella queda
       amagada a la vista (però hi és, i s'envia igual). */
    .toolbar-categories .cat-toggle { flex: 1 1 auto; justify-content: center; padding: 0 0.5rem; }
    .toolbar-categories .cat-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
    .toolbar-categories .cat-toggle:focus-within { outline: 2px solid var(--primary); outline-offset: 1px; }
    .filtre-menu[data-filtre="area"] { grid-column: 1; grid-row: 3; }
    .filtre-menu[data-filtre="servei"] { grid-column: 2; grid-row: 3; }
    .toolbar-wrap .filtre-menu { min-width: 0; }
    .filtre-menu > summary { width: 100%; justify-content: space-between; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: flex; }
    .config-columnes { grid-column: 3; grid-row: 3; position: static; }
    .config-columnes > summary { height: 44px; padding: 0; }

    /* Desplegables de filtre i de l'engranatge: a tot l'ample de la barra, a sota. */
    .toolbar-wrap .filtre-menu { position: static; }
    .toolbar-wrap .filtre-panel, .config-columnes .config-panel {
        left: 0; right: 0; width: auto; max-width: none; top: auto; margin-top: 5px;
    }
    .config-columnes .config-panel { top: calc(100% + 5px); margin-top: 0; }

    /* ---- Targetes: una per fila, a tot l'ample, i per ordre d'importància: nom i
       categoria; denari (amb copiar) i controls; vinculació (amb RJ i ⓘ); i la resta.
       Les columnes amagades a l'engranatge tampoc hi surten (amaga-<clau>). ---- */
    .card-grid { grid-template-columns: 1fr; gap: 0.75rem; }
    .card-grid .prof-card {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
        column-gap: 0.6rem; row-gap: 0.15rem; padding: 0.8rem 0.9rem;
    }
    .prof-card-top, .prof-card-cat { display: contents; }
    .prof-card > h2 { grid-column: 1; grid-row: 1; margin: 0; font-size: 1.15rem; line-height: 1.25; }
    .prof-card-top > .badge, .prof-card-cat > .badge { grid-column: 2; grid-row: 1; justify-self: end; }
    .prof-card-top .denari-copiable { grid-column: 1; grid-row: 2; justify-self: start; }
    .prof-card-top .ordre-controls { grid-column: 2; grid-row: 2; justify-self: end; padding: 0; }
    .prof-card-camps { grid-column: 1 / -1; grid-row: 3; display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.3rem; }
    .prof-card-camps > [data-col="vinculacio"] { order: 1; }
    .prof-card-camps > [data-col="contractes"] { order: 2; }
    .prof-card-camps > [data-col="borsa"] { order: 3; }
    .prof-card-camps > [data-col="comentari"] { order: 4; }
    .prof-card-camps > [data-col="referent"] { order: 5; }
    .prof-card-camps > [data-col="nivell"] { order: 6; }
    .prof-card-camps > [data-col="formacions"] { order: 7; }
    .prof-card-camps > [data-col="arees"] { order: 8; }
    .prof-card-camps > [data-col="torn"] { order: 9; }
    .prof-card-camps > [data-col="supervisor"] { order: 10; }
    .prof-card-camps .prof-meta { margin: 0; }
    /* Els colors de la roda: tota la targeta pintada i una vora una mica més marcada. */
    .prof-card.prof-card-ordre.amb-color { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
    /* L'avís «Copiat ✓» del denari (ara a l'esquerra): cap a la dreta, dins de la pantalla. */
    .prof-card-top .copia-denari-avis { left: 0; right: auto; }

    /* ---- Vista de llista: al mòbil no se'n fa servir (el servidor hi mostra sempre les
       targetes, vegeu _render_llistat): el botó per canviar de vista no hi surt. ---- */
    .view-toggle { display: none !important; }

    /* ---- Contractes, borsa i avaluació (i el comentari) a les targetes: cada dada a la
       seva línia, l'etiqueta i el valor separats, el text sencer encara que ocupi més
       d'una línia. Millor una targeta més alta que no pas un text que no es llegeix. ---- */
    .contracte-box .contractes { font-size: 0.92rem; line-height: 1.45; gap: 0.45rem; }
    .prof-card .contractes-et { flex: 0 0 5.6rem; }
    .prof-card .contracte-box { padding: 0.55rem 0.7rem; }
    .prof-card .comentari-mostra { white-space: normal; overflow: visible; text-overflow: clip; text-align: left; height: auto; overflow-wrap: anywhere; }
    .prof-card .comentari-cel { align-items: flex-start; }

    /* ---- Quadres d'edició (contractes, borsa i avaluació, reducció de jornada, «Cobreix»,
       comentaris): s'obren des de baix, a tot l'ample, amb camps grans, per sobre del
       teclat (--teclat, vegeu l'script de la llista). El JS que els situa al costat de la
       fila fa servir estils en línia: aquí es passen per sobre. ---- */
    .contracte-flotant, .comentari-flotant {
        position: fixed !important; left: 0 !important; right: 0 !important; top: auto !important;
        bottom: var(--teclat, 0px) !important; width: auto !important;
        max-height: calc(100% - var(--teclat, 0px) - 3.5rem); overflow-y: auto; overscroll-behavior: contain;
        border-radius: 14px 14px 0 0; border-width: 1px 0 0;
        padding: 0.9rem 16px calc(1rem + env(safe-area-inset-bottom));
        box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.32), 0 -6px 24px rgba(0, 0, 0, 0.2);
        z-index: 70; gap: 0.7rem;
    }
    .contracte-flotant fieldset { gap: 0.6rem 0.7rem; }
    .contracte-flotant-camp { font-size: 0.85rem; gap: 0.2rem; }
    .contracte-flotant input, .contracte-flotant select { min-height: 44px; padding: 0.4rem 0.6rem; }
    .contracte-flotant legend { font-size: 0.85rem; }
    .comentari-flotant textarea {
        min-height: 7rem; font-size: 16px; width: 100%; box-sizing: border-box;
        border: 1px solid var(--primary); border-radius: 8px; padding: 0.6rem 0.7rem;
    }
    .quadre-tanca {
        display: flex; align-self: flex-end; align-items: center; justify-content: center; gap: 0.3rem;
        min-height: 44px; min-width: 44px; margin: -0.4rem -0.4rem -0.2rem auto; padding: 0 0.7rem;
        background: none; border: 1px solid var(--border); border-radius: 999px;
        color: var(--text); font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer;
    }
    .comentari-flotant .quadre-tanca { margin: 0 0 0.5rem auto; }
    /* «Desat ✓», «Desant…» i els errors de desar: un avís fix a dalt de la pantalla, que es
       veu sempre (també amb un quadre obert o el teclat fora). */
    .pt-estat.ordre-estat:not(:empty) {
        position: fixed; top: 0.6rem; left: 50%; transform: translateX(-50%); z-index: 90;
        margin: 0; padding: 0.45rem 0.9rem; border-radius: 999px; max-width: calc(100vw - 32px);
        background: #1f2937; color: #fff; font-size: 0.9rem; font-weight: 600; text-align: center;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    }
    .pt-estat.ordre-estat.pt-error:not(:empty) { background: var(--error-text); }
}

/* ===========================================================================
   Mòbil, tanda 3 (30/10): la planilla del dia (pantalla d'assignació). Només aparença:
   l'Excel i el PDF es fan al servidor i no en depenen, i a l'ordinador la pantalla es pinta
   igual que abans.
   =========================================================================== */
/* Moure amb el dit (30/10): la barra, el botó ✎ i l'explicació només existeixen al mòbil; la
   capçalera de zona fixa de la planilla, també. */
.mou-barra, .cel-editar, .nomes-mobil, .zona-fixa { display: none; }

@media (max-width: 700px) {
    /* ---- Capçal: títol, estat, «Desat», botons i la capçalera blava de la data. ---- */
    /* (El capçal és compartit amb altres pantalles: aquí, només el d'aquesta.) */
    main:has(#form-planilla) .list-header h1 { font-size: 1.35rem; line-height: 1.3; }
    main:has(#form-planilla) .list-header h1 .autodesat { margin-left: 0; display: inline-block; }
    main:has(#form-planilla) .list-header-actions { flex-wrap: wrap; gap: 0.4rem; width: 100%; }
    .excel-capcalera { padding: 0.7rem 0.9rem; gap: 0.7rem; }
    .excel-logo { height: 30px; }
    .excel-titols h2 { font-size: 1.2rem; }
    .excel-titols p { font-size: 0.85rem; }
    .linia-avis-rotacio { padding: 0.6rem 0.7rem; }

    /* ---- La planilla, sencera (30/10, a petició de Laura: la vista apilada era massa llarga) ----
       La mateixa taula que a l'ordinador, amb un ample fix, dins d'un requadre que es desplaça en
       totes dues direccions amb el dit i que fa l'alçada de la pantalla (la pàgina no es mou de
       costat). Pessigar amplia o redueix la planilla sencera com una imatge (vegeu «Pessigar»,
       més avall). A dalt del requadre, fixa, la capçalera de la zona on s'és (`.zona-fixa`). */
    .card-planilla-dia { padding: 0.35rem; }
    .table-wrap.planilla-dia-wrap {
        overflow: auto; max-height: calc(100dvh - var(--topbar-h) - 1rem);
        touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch;
    }
    /* L'ample de l'ordinador gran (≈1280 px): a menys, les capçaleres estretes es parteixen per síl·labes. */
    .excel-planilla { width: 80rem; }
    /* El nom de cada zona, a l'esquerra (centrat en 1280 px quedava fora de la vista). */
    .planilla-dia-wrap .fila-zona td { text-align: left; }
    .zona-fixa:not([hidden]) {
        display: block; position: sticky; top: 0; left: 0; z-index: 3; box-sizing: border-box;
        width: 100%; height: 1.8rem; margin-bottom: -1.8rem; padding: 0 0.7rem; line-height: 1.8rem;
        background: var(--muted); color: #fff; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.03em;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    }

    /* ---- Avisos de dalt, panell de treball i incidències ---- */
    .pt-panell-cap { gap: 0.4rem; }
    .pt-panell-etiqueta { display: inline-block; white-space: normal; border-radius: 8px; margin: 0.2rem 0 0.4rem; line-height: 1.35; }
    .pt-panell-cols { grid-template-columns: minmax(0, 1fr); gap: 0.8rem; }
    .pt-panell-col { padding: 0.6rem 0.7rem; }
    .pt-persona, .pt-incidencia { padding: 0.45rem 0.55rem; gap: 0.3rem 0.6rem; }
    .pt-persona-nom { overflow-wrap: anywhere; min-width: 0; }
    .pt-motiu { font-size: 0.85rem; }
    .pt-marca-input { width: 100%; font-size: 16px; padding: 0.4rem 0.5rem; }
    .pt-incidencia-origen { margin-left: 0; flex-basis: 100%; }
    .pt-incidencies summary h3 { display: inline; }
    .avis-sense-cobrir ul, .avis-incompliments ul, .avis-desapareguts ul { padding-left: 1rem; }
    .sc-etiqueta { margin: 0.15rem 0.3rem 0.15rem 0; }
    /* Botons finals: un a sota de l'altre, a tot l'ample. */
    #form-planilla > .form-actions { flex-direction: column; align-items: stretch; }
    #form-planilla > .form-actions .btn { width: 100%; }
    /* «No s'ha pogut desar»: dins de la pantalla. */
    .autodesat-avis { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; }
}

/* ===========================================================================
   Mòbil (30/10): moure gent amb el dit a la planilla del dia. Toques algú i queda marcat
   (barra fosca a dalt); els llocs on pot anar es veuen en verd i els que se salten alguna
   restricció, amb vora vermella discontínua i un ⚠ (es poden triar igualment). L'agafador
   d'arrossegar no serveix amb el dit: aquí s'amaga. Per escriure un nom, el botó ✎.
   =========================================================================== */
@media (max-width: 700px) {
    .cel-arrossega { display: none; }
    .nomes-mobil { display: block; }
    .excel-planilla td.cel-assignat { cursor: pointer; padding-right: 2.1rem; }
    .cel-nom[contenteditable="false"] { cursor: pointer; }
    /* ✎ dins de la cel·la, a la dreta (amb la planilla sencera no hi cap un botó de 44 px; en
       ampliar la planilla, creix amb ella). */
    .cel-editar {
        display: inline-flex; align-items: center; justify-content: center;
        position: absolute; right: 0.15rem; top: 50%; transform: translateY(-50%);
        width: 1.8rem; height: 1.8rem; padding: 0;
        background: var(--card-bg); border: 1px solid var(--border); border-radius: 6px;
        color: var(--primary-dark); font: inherit; font-size: 0.85rem; cursor: pointer;
    }
    .excel-planilla td.cel-assignat.mou-origen {
        outline: 3px solid var(--primary); outline-offset: -3px; background: var(--primary-soft);
    }
    .pt-persona { cursor: pointer; }
    .pt-persona.mou-origen { outline: 3px solid var(--primary); outline-offset: -1px; background: var(--primary-soft); opacity: 1; }
    .excel-planilla td.cel-assignat.mou-desti { outline: 2px solid #1a7f37; outline-offset: -2px; }
    .excel-planilla td.cel-assignat.mou-desti-avis { outline: 2px dashed var(--error-text); outline-offset: -2px; }
    /* Un ⚠ a la cantonada (el motiu sencer surt a la cel·la quan hi deixes algú): així marcar
       algú no canvia l'alçada de les files ni mou la planilla. */
    .excel-planilla td.cel-assignat.mou-desti-avis::before {
        content: "⚠"; position: absolute; left: 0.2rem; top: 0.1rem;
        color: var(--error-text); font-size: 0.8rem; font-weight: 700; line-height: 1;
    }
    .mou-barra:not([hidden]) {
        display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem;
        position: fixed; top: 0; left: 0; right: 0; z-index: 100;
        padding: 0.6rem 0.8rem; background: #1f2937; color: #fff;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); font-weight: 700; font-size: 1rem;
    }
    .mou-text { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
    .mou-desat { font-size: 0.85rem; font-weight: 600; color: #9be3b0; }
    .mou-desat:empty { display: none; }
    .mou-botons { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-left: auto; }
    .mou-botons .btn { padding: 0.3rem 0.8rem; font-size: 0.9rem; }
    .mou-botons .btn[hidden] { display: none; }
}

/* ===========================================================================
   Pessigar (30/10): a les pantalles amb una taula ampliable (planilla del dia, Estructura
   planilla) el pessic escala NOMÉS la taula (/static/pessic.js); la pàgina no s'amplia mai, i la
   barra de dalt, el títol, els botons i els panells es queden a la seva mida. A l'ordinador no
   hi ha cap canvi: `.taula-escala` hi és un simple contenidor.
   =========================================================================== */
@media (max-width: 700px) {
    html:has(.taula-escala) { touch-action: pan-x pan-y; }
    .taula-escala > table { transform-origin: 0 0; }
    /* La taula d'Estructura planilla fa el seu ample mínim (el que ja feia al mòbil), no el del
       contenidor escalat. */
    .taula-escala > .planilla-taula { width: min-content; }
    .planilla-taula-wrap { touch-action: pan-x pan-y; }
}

/* ===========================================================================
   Textos d'ajuda plegables (30/10): la línia «▸ Com funciona…» que el JS de base.html posa davant
   dels blocs llargs d'explicació (només al mòbil, i a la planilla del dia també a l'ordinador).
   Sense aquest JS no hi ha cap botó ni res plegat.
   =========================================================================== */
.plegat { display: none !important; }
.plega-boto {
    display: flex; align-items: center; gap: 0.4rem; width: fit-content; max-width: 100%;
    margin: 0.1rem 0 0.4rem; padding: 0.25rem 0; background: none; border: 0;
    color: var(--primary); font: inherit; font-size: 0.9rem; font-weight: 600; text-align: left; cursor: pointer;
}
.plega-boto:hover { text-decoration: underline; }
.plega-fletxa { display: inline-block; transition: transform 0.15s ease; }
.plega-boto[aria-expanded="true"] .plega-fletxa { transform: rotate(90deg); }
/* Una targeta que només té text plegat es queda en una línia, sense el buit de sota. */
.card:has(> .plega-boto):not(:has(> :not(.plega-boto):not(.plegat))) { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.card:has(> .plega-boto):not(:has(> :not(.plega-boto):not(.plegat))) > .plega-boto { margin: 0; }
@media (pointer: coarse) { .plega-boto { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .plega-fletxa { transition: none; } }

/* ===========================================================================
   Mòbil (30/10): taules amples en targetes (`.taula-targetes`): Les meves planilles, catàleg de
   formacions, històric d'importacions i resum del dia. Només aparença i només fins a 700 px:
   cada fila és una targeta a tot l'ample (una graella petita), sense desplaçament de costat. Les
   etiquetes («Horari: »…) surten de `data-etiqueta`. Els filtres amaguen files amb `hidden`,
   que aquí es respecta explícitament (la graella el trepitjaria).
   =========================================================================== */
@media (max-width: 700px) {
    .card:has(.taula-targetes) { padding: 0.6rem 0 0.2rem; background: none; border: 0; box-shadow: none; }
    .card:has(.taula-targetes) > h3, .card:has(.taula-targetes) > .hint { padding: 0 0.2rem; }
    .table-wrap:has(> .taula-targetes) { overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
    .taula-targetes, .taula-targetes tbody { display: block; width: 100%; }
    .prof-table.taula-targetes { border: 0; border-radius: 0; background: none; }
    .taula-targetes thead { display: none; }
    .taula-targetes tbody tr {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.3rem 0.8rem; align-items: center;
        margin: 0 0 0.6rem; padding: 0.75rem 0.9rem; border: 1px solid var(--border); border-radius: 10px;
        background: var(--card-bg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }
    .taula-targetes tbody tr[hidden] { display: none; }
    .prof-table.taula-targetes tbody tr:hover { background: var(--card-bg); }
    .taula-targetes tbody td {
        display: block; grid-column: 1 / -1; min-width: 0; max-width: none; padding: 0; border: 0;
        white-space: normal; overflow-wrap: anywhere; font-size: 0.95rem;
    }
    .taula-targetes td[data-etiqueta]::before {
        content: attr(data-etiqueta) ": "; color: var(--muted); font-size: 0.82rem; font-weight: 600;
    }

    /* ---- Les meves planilles: data i dia a dalt, estat a la dreta, resum, botons ---- */
    .dies-taula tbody tr > td:nth-child(1) { grid-row: 1; grid-column: 1; font-size: 1.15rem; }
    .dies-taula tbody tr > td:nth-child(3) { grid-row: 1; grid-column: 2; }
    .dies-taula tbody tr > td:nth-child(2) { grid-row: 2; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.85rem; color: var(--primary-dark); }
    .dies-taula .dies-resum .hint { display: inline; }
    .dies-taula td.dies-accions { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.3rem; text-align: left; }
    .dies-taula td.dies-accions .btn { flex: 1 1 auto; min-height: 44px; }
    .dies-taula td.dies-accions .btn-paperera { width: 44px; height: 44px; margin: 0; border: 1px solid var(--border); flex: 0 0 auto; }
    .dies-taula tr.dia-avui { box-shadow: inset 6px 0 0 var(--primary); }
    .dies-taula tr.fila-confirmada { background: var(--estat-confirmada-bg); border-color: #c5e6cf; }
    .dies-taula tr.fila-confirmada:hover { background: var(--estat-confirmada-bg); }
    .dies-taula tr.dia-avui:not(.fila-confirmada) { background: var(--primary-soft); }
    /* L'avís taronja de rotació, enganxat a sota de la targeta del seu dia. */
    .dies-taula tr:has(+ .fila-avis-rotacio) { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
    .dies-taula tr.fila-avis-rotacio {
        display: block; margin-top: 0; padding: 0.6rem 0.9rem; border-top: 0;
        border-radius: 0 0 10px 10px; background: var(--estat-esborrany-bg);
    }
    .dies-taula tr.fila-avis-rotacio td { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
    .dies-taula tr.fila-avis-rotacio .btn { min-height: 44px; }
    .dies-filtres .field { min-width: 0; flex: 1 1 10rem; }
    /* El text d'ajuda no es fica sota el botó «Crear planilla» (44 px d'alt al mòbil). */
    main:has(.dies-taula) .list-header + .hint { margin-top: 0.6rem; }
    .dies-filtres .field select { width: 100%; }
    .dies-filtres-n { margin-left: 0; flex-basis: 100%; }

    /* ---- Catàleg de formacions: nom a dalt (enllaç), estat a la dreta, xifres a sota ---- */
    .cataleg-taula tbody tr > td:nth-child(1) { grid-row: 1; grid-column: 1; }
    .cataleg-taula tbody tr > td:nth-child(1) > a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font-size: 1.05rem; }
    .cataleg-taula tbody tr::before {
        grid-row: 1; grid-column: 2; align-self: start; margin-top: 0.6rem;
        padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.03em;
    }
    .cf-grup[data-estat="actives"] .cataleg-taula tbody tr::before { content: "ACTIVA"; background: var(--estat-confirmada-bg); color: var(--estat-confirmada); }
    .cf-grup[data-estat="retirades"] .cataleg-taula tbody tr::before { content: "RETIRADA"; background: var(--border); color: var(--muted); }
    .cataleg-desc { max-width: none; }
    /* (La graella de la barra és la de les llistes de professionals: aquí els tres botons d'estat
       ocupen tota la fila, a parts iguals.) */
    .cataleg-filtres .toolbar-categories { grid-column: 1 / -1; flex-wrap: nowrap; }
    .cataleg-filtres .toolbar-categories .cat-toggle { flex: 1 1 0; min-width: 0; }

    /* ---- Històric d'importacions: data i hora a dalt; els dies, botons de dit ---- */
    .historic-taula tbody tr { cursor: default; }
    .historic-taula tbody tr > td:nth-child(1) { font-weight: 700; font-size: 1.05rem; }
    .historic-taula td.historic-dies a {
        display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.15rem;
    }

    /* ---- Resum del dia: nom i categoria a dalt, denari, horari i servei (o motiu) ---- */
    .resum-taula tbody tr > td:nth-child(2) { grid-row: 1; grid-column: 1; font-size: 1.05rem; font-weight: 600; }
    .resum-taula tbody tr > td:nth-child(3) { grid-row: 1; grid-column: 2; }
    .resum-taula tbody tr > td:nth-child(1) { grid-row: 2; }
    .resum-taula tbody tr > td:nth-child(2) > a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
}

/* ===========================================================================
   Mòbil (30/10): el menú ☰. Només fins a 700 px (entre 701 i 1.420 px, on també hi ha
   ☰, a l'ordinador, no canvia res). Un panell blanc penjat de la barra de dalt (que es
   queda visible: el ☰ el torna a tancar), que llisca cap avall, amb la resta de la
   pantalla enfosquida darrere; prémer fora o Esc el tanquen (el JS de base.html ja ho
   feia). Totes les entrades a l'esquerra, de 48 px; les d'un mòdul, sagnades i més
   petites; la pantalla on s'és, marcada com al desplegable de l'ordinador. Si no hi cap,
   el panell es desplaça per dins.
   Abans, la regla tàctil `.menu-entrada { display: flex; align-items: center }` centrava
   les entrades enllaç (que a l'ordinador són una columna flex) i no les del desplegable.
   =========================================================================== */
@keyframes menu-baixa { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes menu-fons { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 700px) {
    .menu-principal {
        position: absolute; top: 100%; left: 0; right: 0; z-index: 41;
        margin: 0; padding: 0.4rem 0 0.6rem; border: 0;
        max-height: calc(100dvh - var(--topbar-h) - 0.5rem); overflow-y: auto; overscroll-behavior: contain;
        background: var(--card-bg); color: var(--text);
        border-radius: 0 0 14px 14px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
    }
    .menu-principal.obert { display: block; animation: menu-baixa 0.18s ease-out; }
    /* La resta de la pantalla, enfosquida i quieta. Prémer-hi és «prémer fora». */
    body:has(.menu-principal.obert)::after {
        content: ""; position: fixed; inset: 0; z-index: 39;
        background: rgba(15, 23, 42, 0.45); animation: menu-fons 0.18s ease-out;
    }
    html:has(.menu-principal.obert) { overflow: hidden; }

    /* Grups separats per una ratlla fina i clara. */
    .menu-principal > ul > li + li { border-top: 1px solid var(--border); }
    .menu-principal .menu-entrada, .menu-principal .submenu a {
        display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
        width: 100%; min-height: 48px; box-sizing: border-box; margin: 0;
        text-align: left; white-space: normal; opacity: 1;
        border: 0; border-left: 4px solid transparent; border-radius: 0;
        color: var(--text); background: none; text-decoration: none;
    }
    .menu-principal .menu-entrada { padding: 0.55rem 1.25rem; font-size: 1rem; font-weight: 600; }
    /* «Planilla diària»: com qualsevol mòdul, però aquí no es prem (les opcions ja es veuen sota). */
    .menu-principal button.menu-entrada { cursor: default; }
    .menu-principal .submenu { padding: 0 0 0.3rem; }
    .menu-principal .submenu a { padding: 0.55rem 1.25rem 0.55rem 2.25rem; font-size: 0.93rem; font-weight: 400; }
    .menu-principal a.menu-entrada:hover, .menu-principal .submenu a:hover,
    .menu-principal a.menu-entrada:active, .menu-principal .submenu a:active { background: var(--bg); }
    /* La pantalla on s'és: com al desplegable de l'ordinador. */
    .menu-principal .menu-entrada.actiu, .menu-principal .submenu a.actiu {
        border-left-color: var(--primary); background: var(--primary-soft); color: var(--primary-dark); font-weight: 700;
    }
    /* El mòdul de la pantalla on s'és, en blau però sense fons: la marcada és l'opció de sota. */
    .menu-principal button.menu-entrada.actiu { background: none; border-left-color: transparent; color: var(--primary-dark); }
    .menu-principal .menu-entrada:focus-visible, .menu-principal .submenu a:focus-visible { outline: 2px solid var(--primary); outline-offset: -3px; }
    /* El ☰ marcat mentre el menú és obert. */
    .menu-boto[aria-expanded="true"] { background: rgba(255, 255, 255, 0.2); border-color: #fff; }
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
    .menu-principal.obert, body:has(.menu-principal.obert)::after { animation: none; }
}