/* styles.css — estils de la rèplica local sBID / BID */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* Valors compartits per tota la web. */
:root {
    /* Separació entre la nansa d'arrossegar (els 6 punts ⠿) i el text que la
       segueix. És la mateixa de sempre dels llistats de valoracions; qualsevol
       llistat nou amb nansa ha d'usar aquesta variable, mai un número propi. */
    --nansa-sep: 23px;
}

body {
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #1f2d3d;
    background: #fff;
}

/* =====================================================================
   LOGIN (rèplica de la pantalla d'accés al BID) — screen0.jpg
   ===================================================================== */
.login-page { display: flex; flex-direction: column; min-height: 100vh; }

/* ---------- Capçalera ---------- */
.site-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 18px 40px;
    background: #fff;
}
.contacta { color: #1a1a1a; text-decoration: none; font-size: 15px; }
.contacta:hover { text-decoration: underline; }

/* ---------- Zona central ---------- */
.login-main {
    /* No s'estira per omplir la finestra: la franja grisa només ocupa l'alçada
       de la targeta més el seu encoixinat (segueix ocupant tota l'amplada). */
    flex: none;
    background: #e9ebed;
    padding: 12px 20px 20px;
    display: flex;
    justify-content: center;
}

/* Targeta única (marc gris amb la pestanya superior) */
.login-card {
    position: relative;
    width: 100%;
    max-width: 1120px;
    background: #efefef;
    border-radius: 10px;
    padding: 26px 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.login-card::before {
    content: "";
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 15px;
    background: #efefef;
    border-radius: 5px 5px 0 0;
}

/* Marca BID */
.bid-brand { display: flex; align-items: center; gap: 18px; flex: 1; min-width: 300px; }
.bid-dots { flex: none; }
.bid-name { font-size: 66px; font-weight: 800; letter-spacing: -3px; line-height: 1; }
.bid-name .b { color: #1a1a1a; }
.bid-name .d { color: #d8232a; }
.bid-full { font-size: 26px; color: #2b2b2b; letter-spacing: 1px; }
.bid-full .dades { color: #d8232a; }

/* Caixa de login vermella */
.login-box {
    background: #d8232a;
    border-radius: 16px;
    padding: 30px 34px;
    width: 400px;
    color: #fff;
    flex: none;
}
.login-box label { display: block; font-size: 15px; margin-bottom: 7px; }
.login-box input {
    width: 100%;
    border: 0;
    border-radius: 2px;
    padding: 10px 11px;
    font-size: 15px;
    margin-bottom: 20px;
    color: #1f2d3d;
    background: #fff;
}
.login-box input:focus { outline: 2px solid #7d0f14; }

.entra-row { display: flex; justify-content: flex-end; align-items: center; }
.btn-entra {
    background: none;
    border: 0;
    color: #fff;
    font-size: 17px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.btn-entra .play {
    background: #fff;
    color: #d8232a;
    width: 40px; height: 34px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.recuperar {
    display: inline-block;
    margin-top: 16px;
    color: #fff;
    font-size: 14px;
    text-decoration: underline;
}
.login-error {
    background: rgba(255, 255, 255, .92);
    color: #a11116;
    border-radius: 4px;
    padding: 9px 11px;
    font-size: 13px;
    margin-bottom: 18px;
}

/* ---------- Finestra modal ---------- */
.modal {
    border: 0;
    border-radius: 10px;
    padding: 0;
    width: calc(100% - 40px);
    max-width: 380px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
    /* Centrat garantit (independent de l'estil per defecte del navegador) */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}
.modal::backdrop { background: rgba(0, 0, 0, .45); }
.modal-body { padding: 26px 28px; text-align: center; }
.modal-title { font-size: 18px; font-weight: 800; color: #1a1a1a; margin-bottom: 10px; }
.modal-text  { font-size: 15px; color: #444; margin-bottom: 22px; white-space: pre-line; }
.modal-close {
    background: #d8232a;
    color: #fff;
    border: 0;
    border-radius: 5px;
    padding: 10px 24px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.modal-close:hover { background: #b91d23; }

/* ---------- Peu ---------- */
.site-footer { background: #fff; padding: 20px 44px 34px; }
.footer-partners {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    flex-wrap: wrap;
    padding-top: 22px;
}
.partner-group h3 {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3px;
    color: #333;
    margin-bottom: 12px;
}

/* Logos institucionals (imatges reals) */
.logo-gencat { height: 56px; width: auto; display: block; }
.logo-ibc    { height: 64px; width: auto; display: block; }

/* Va dins de .footer-partners, entre els dos logos; l'align-items:flex-end del
   contenidor ja l'alinea amb la base de les imatges. */
.footer-legal { display: flex; justify-content: center; gap: 30px; }
.footer-legal a { color: #333; text-decoration: none; font-size: 15px; }
.footer-legal a:hover { text-decoration: underline; }

/* ---------- Responsive login ---------- */
@media (max-width: 900px) {
    .login-card { justify-content: center; padding: 34px 24px; }
    .bid-name { font-size: 48px; }
    .bid-full { font-size: 20px; }
    .login-box { width: 100%; max-width: 400px; }
    .footer-partners { justify-content: center; gap: 30px; }
}

/* =====================================================================
   AGENDA (rèplica visual de la pantalla interna sBID) — screen1.png
   ===================================================================== */
.app-body { background: #fff; }

.layout {
    display: grid;
    grid-template-columns: 170px 1fr;
    /* ⚠ La FINESTRA no ha de fer MAI scroll vertical: el layout és exactament
       l'alçada de la pantalla i qui ha de desplaçar-se ho fa PER DINS (la barra
       lateral, o el contingut de .main, o el .taula-scroll dels llistats). Així
       la barra de desplaçament de la finestra no apareix enlloc. */
    height: 100vh;
    overflow: hidden;
}

/* ---------- BARRA LATERAL ---------- */
.sidebar {
    background: #2b2b2b;
    border-right: 1px solid #d9dee3;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;   /* si el menú és més alt que la pantalla, es desplaça ell */
}
/* Part plegable (usuari + menú); en pantalla petita es desplega com a overlay. */
.side-panel {
    display: flex;
    flex-direction: column;
}

.side-top {
    background: #d7d8ee;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
}
.side-selects { display: flex; gap: 6px; flex: 1; }
.pill-select {
    background: #fff;
    border: 1px solid #b9bde0;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 700;
    color: #3b3b57;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}
.pill-select span { font-weight: 400; font-size: 10px; }
.side-user-icon {
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: #444;
}

/* Botó ☰ estil Gmail: icona sense fons, cercle en passar-hi per sobre. */
/* Mides exactes de la guia (extres/boto.jpg): cercle de 48 px de diàmetre,
   icona de 18×12 px (barres de 2 px amb 3 px de separació). */
.hamburger {
    background: transparent;
    color: #e8eaed;
    border: 0;
    width: 48px;
    height: 48px;
    margin: 8px;
    padding: 0;
    border-radius: 50%;
    line-height: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.hamburger:hover { background: rgba(232, 234, 237, .12); }
/* Fila superior de la barra: botó ☰ + tipus d'usuari que ha iniciat sessió. */
.side-menu-top { display: flex; align-items: center; }
.side-rol {
    color: #cfd3d8; font-size: 12px; font-weight: 700;
    letter-spacing: .3px; white-space: nowrap;
}
/* Amb la barra plegada (rail estret) el rol no hi cap: s'amaga. ⚠ El rail estret
   és cosa de pantalla ampla: en pantalla petita la barra no és una columna sinó
   una franja superior, i el ☰ hi obre el menú (.nav-obert) en comptes de plegar-lo. */
@media (min-width: 901px) {
    .layout.nav-plegat .side-rol { display: none; }
}

/* Quadre d'usuari (icona ⚙️ + nom en lila fluix). La vora esquerra
   transparent i l'amplada fixa de la icona el deixen alineat amb els
   elements del menú de sota. */
.side-userbox {
    background: #d7d8ee;
    border-top: 1px solid #c3c6e6;
    border-bottom: 1px solid #c3c6e6;
    border-left: 3px solid transparent;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 2px;
    text-decoration: none;
    cursor: pointer;
    transition: background .12s;
}
.side-userbox:hover { background: #c9cbe6; }
.side-user-id {
    font-size: 14px;
    font-weight: 700;
    color: #6a5aa8;
    display: flex;
    align-items: center;
    gap: 10px;
}
.side-user-ico { width: 20px; text-align: center; font-size: 16px; }
.side-user-rol { font-size: 13px; color: #8479b3; margin-left: 30px; }

.side-menu { display: flex; flex-direction: column; padding-top: 6px; }
.menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    color: #f2f2f2;
    text-decoration: none;
    font-size: 14px;
    border-left: 3px solid transparent;
    transition: background .12s;
}
.menu-item:hover { background: #3a3a3a; }
.menu-item.actiu { background: #3a3a3a; border-left-color: #2989d8; }
/* Les icones del menú van a la mateixa mida que les dels llistats (.cel-accions .btn-mini). */
.menu-ico { width: 20px; text-align: center; font-size: 15px; }
/* Icones de menú refetes com a SVG (Tauler, Alumnat, Entitats, Acords): el màxim
   de grans que caben bé a la casella de la icona (20px), centrades. */
.menu-ico .ico-menu { display: block; width: 20px; height: 20px; margin: 0 auto; }
.menu-item.sortir { color: #e2564a; }
.menu-item.sortir .menu-ico { color: #e2564a; }
.menu-ico .ico-power, .menu-ico .ico-edifici, .menu-ico .ico-persona { display: block; margin: 0 auto; }
/* Exempcions: el document d'Acords amb la campana daurada a sobre, a la cantonada
   inferior dreta i més grossa que el full. */
.ico-exempcio { position: relative; display: inline-block; line-height: 1; }
.ico-exempcio .ico-exempcio-camp { position: absolute; right: -8px; bottom: -5px; width: 15px; height: 15px; }
.menu-txt { white-space: nowrap; }

/* Apartats amb submenú (Alumnat / Entitats / Acords). El pare és un <button>:
   cal treure-li l'aspecte de botó perquè es vegi com la resta d'ítems. */
.menu-pare {
    width: 100%;
    background: none;
    border: 0;
    border-left: 3px solid transparent;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}
/* Mateixa mida que el triangle d'ordenació dels llistats (.taula-llista th.asc::after,
   10px). Cal el glif ple ▶ (U+25B6), NO el petit ▸ (U+25B8): amb el mateix
   font-size, el «small triangle» es veu força més petit. */
.menu-fletxa { margin-left: auto; font-size: 10px; line-height: 1; transition: transform .12s; }
.menu-grup.obert .menu-fletxa { transform: rotate(90deg); }
/* El submenú només es veu quan el grup és «obert». */
.submenu { display: none; flex-direction: column; }
.menu-grup.obert .submenu { display: flex; }
.submenu-item {
    position: relative;
    display: block;
    padding: 8px 14px 8px 56px;   /* sagnat: una mica més a la dreta que el text del pare */
    color: #d8d8d8;
    text-decoration: none;
    font-size: 14px;
}
.submenu-item:hover { background: #3a3a3a; }
.submenu-item.actiu { background: #3a3a3a; color: #fff; }
/* La franja blava de l'ítem triat NO va a l'extrem esquerre (com el menú
   principal), sinó alineada amb la icona del pare de damunt (vora 3px + coixí
   14px = 17px). Va en un pseudo-element per no desplaçar el text. */
.submenu-item.actiu::before {
    content: "";
    position: absolute;
    left: 40px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #2989d8;
}

/* ---------- MENÚ PLEGAT (només icones, estil Gmail) ----------
   En prémer el ☰ s'afegeix .nav-plegat a .layout: la columna es fa
   estreta i s'amaga tot el text; queden només les icones.
   ⚠ TOT aquest bloc és NOMÉS de pantalla ampla: per sota de 900px la barra
   lateral no és una columna (veure el bloc RESPONSIVE del final), i si aquestes
   regles hi arribessin amagarien el text i els submenús del menú desplegat. */
@media (min-width: 901px) {
    .layout.nav-plegat { grid-template-columns: 64px 1fr; }
    .layout.nav-plegat .side-user-nom,
    .layout.nav-plegat .side-user-rol,
    .layout.nav-plegat .menu-txt { display: none; }
    /* En plegar, NOMÉS s'amaga el text: les icones conserven exactament la mateixa
       posició (mateix coixí i alineació que desplegat), no es recentren ni es mouen. */
    .layout.nav-plegat .side-userbox { align-items: flex-start; padding: 12px 14px; }
    .layout.nav-plegat .menu-item { justify-content: flex-start; gap: 10px; padding: 10px 14px; }
    /* Plegat (només icones): els submenús i la fletxa no hi tenen lloc. */
    .layout.nav-plegat .menu-fletxa,
    .layout.nav-plegat .submenu { display: none; }
    .layout.nav-plegat .menu-pare { justify-content: flex-start; padding: 10px 14px; }
}

/* ---------- ZONA PRINCIPAL ----------
   min-width: 0 perquè, com que .main és la columna «1fr» de la graella del
   .layout, per defecte no es pot fer més estreta que el seu contingut: n'hi
   hauria prou amb un text llarg que no es pugui partir per eixamplar-ho tot i
   treure la pàgina de mare. Amb això, el que no hi cap es retalla a dins. */
/* .main omple exactament l'alçada del layout i, si el seu contingut no hi cap
   (formularis llargs, «Valors» amb iframes alts…), es desplaça PER DINS —no la
   finestra. Els llistats la posen a overflow:hidden i desplacen el .taula-scroll. */
.main { display: flex; flex-direction: column; background: #fff; min-width: 0; min-height: 0; overflow-y: auto; }

/* Festius: la pàgina no es desplaça; el llistat ompli fins al final i té el seu
   propi desplaçament vertical (amb la capçalera enganxada a dalt). */
/* Cal que sigui una columna FLEX: si no, els flex:1 de dins no valen res, el
   llistat creix tant com vulgui i el que sobresurt queda retallat i inabastable. */
.main-festius { height: 100vh; max-height: 100%; overflow: hidden; display: flex; flex-direction: column; }
.main-festius .alta-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.main-festius .llista-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.main-festius .llista-wrap .taula-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.main-festius .taula-scroll thead th { position: sticky; top: 0; z-index: 1; }

.topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 20px;
    border-bottom: 1px solid #e2e7ec;
    background: #fff;
    color: #47586b;
}
.breadcrumb { flex: 1; font-size: 15px; color: #6a7480; }
.breadcrumb b { color: #333; }
.top-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: #eceff3;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}

.subbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 12px 20px 0;
    border-bottom: 1px solid #e2e7ec;
    background: #fff;
}
.tabs { display: flex; gap: 4px; }
.tab {
    background: #fff;
    border: 1px solid #d5dbe1;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    padding: 9px 16px;
    font-size: 14px;
    color: #3a6ea5;
    cursor: pointer;
    position: relative;
    top: 1px;
}
.tab.actiu {
    background: #4a90d9;
    color: #fff;
    border-color: #4a90d9;
}
.subbar-date { font-size: 14px; color: #56616c; padding-bottom: 10px; }

/* ---------- CONTINGUT ---------- */
.content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    padding: 22px;
    background: #fff;
}
.col-left, .col-right { display: flex; flex-direction: column; gap: 22px; }
/* El tauler ja no té dues columnes: tot va en una sola, un element sota l'altre
   (si no, la graella de .content repartiria les pestanyes i els calendaris i una
   part quedaria a la dreta). */
/* Sense gap entre fills: la barra de pestanyes ha de TOCAR el marc de contingut.
   Cal anul·lar explícitament el gap: 22px que hereta de .content (si no, queda un
   espai entre els títols de les pestanyes i el marc de sota). L'espaiat entre
   blocs el donen els marges propis (.pest-contingut avall, .cal4 amunt). */
.content.content-tauler { display: flex; flex-direction: column; gap: 0; }

.panel {
    border: 1px solid #dfe4e9;
    border-radius: 6px;
    background: #fff;
}
.panel-head {
    background: #f5f6f8;
    border-bottom: 1px solid #dfe4e9;
    padding: 14px 16px;
    font-size: 16px;
    color: #4a5560;
}
.panel-body { padding: 16px; }

.subpanel {
    border: 1px solid #e3e8ed;
    border-radius: 6px;
    margin-bottom: 16px;
}
.subpanel-head {
    background: #f7f8fa;
    border-bottom: 1px solid #e3e8ed;
    padding: 11px 14px;
    font-size: 15px;
    color: #55606b;
}
.subpanel-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.subpanel-body.muted { color: #8a95a1; }

.badge {
    display: inline-block;
    min-width: 20px;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    line-height: 1.4;
}
.badge.dark { background: #4a4a4a; color: #fff; }

.task-link {
    color: #1f6fb2;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}
.task-link:hover { text-decoration: underline; }
.task-date { color: #1f6fb2; font-weight: 700; }

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    border-radius: 5px;
    padding: 9px 14px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.btn-primary { background: #2f7ed8; color: #fff; }
.btn-primary:hover { background: #2568b8; }
.btn-sm { padding: 6px 10px; font-size: 13px; }

.notif-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    border-bottom: 1px solid #eef1f4;
    margin-bottom: 4px;
    font-size: 14px;
    color: #55606b;
}
.notif-sep { margin-left: 8px; }

.notif-row {
    display: block;
    background: #e7f3e2;
    border: 1px solid #d3e8ca;
    border-radius: 5px;
    padding: 12px 14px;
    margin-top: 10px;
    color: #3a7d34;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}
.notif-row .task-date { color: #3a7d34; }
.notif-row:hover { background: #ddeed5; }

.notif-actions { display: flex; gap: 12px; margin-top: 16px; }

/* ---------- CALENDARI ---------- */
.calendar { width: 100%; border-collapse: collapse; text-align: center; }
.cal-nav th {
    background: #4a4a4a;
    color: #fff;
    padding: 10px 4px;
    font-size: 15px;
}
.cal-title { text-transform: lowercase; font-weight: 700; }
.cal-arrow { cursor: pointer; color: #cfcfcf; font-size: 14px; }
.cal-days th {
    background: #4a4a4a;
    color: #fff;
    padding: 8px 4px;
    font-size: 14px;
    font-weight: 700;
    border-top: 1px solid #5a5a5a;
}
.calendar td {
    padding: 12px 4px;
    font-size: 15px;
    color: #3a444e;
    border: 1px solid #eceff2;
    height: 20px;
}
.cal-empty { background: #fafbfc; }
.cal-day.amb-tasca { background: #f7cfd0; }
/* Festiu obligatori: mateix taronja que el calendari dels acords (.cal-festiu).
   Declarat abans que .avui perquè, si avui és festiu, guanyi el ressaltat d'avui. */
.cal-day.festiu-oblig { background: #ef8354; color: #4a2200; font-weight: 600; cursor: help; }
/* Avui: només el marc (box-shadow interior perquè no desplaci res); l'interior
   queda blanc, o del color del festiu obligatori si el dia n'és. */
.cal-day.avui { box-shadow: inset 0 0 0 2px #000; font-weight: 700; }

.day-head { font-size: 15px; color: #55606b; margin-bottom: 12px; }
.day-body.muted { color: #8a95a1; font-size: 14px; }

/* Tira de quatre calendaris del tauler, un AL COSTAT de l'altre (una sola fila),
   amb fletxes a banda i banda. */
/* Norma general: tot botó habilitat mostra el cursor de mà en passar-hi per sobre. */
button:not(:disabled) { cursor: pointer; }
.cal4 { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.cal4-strip { display: flex; gap: 12px; flex: 1; min-width: 0; }
.cal4-mes { flex: 1 1 0; min-width: 0; }
.cal4-titol { text-align: center; font-weight: 700; color: #44515c; font-size: 14px; margin-bottom: 6px; text-transform: lowercase; }
.cal4-arrow {
    flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: #2f7ed8; color: #fff; text-decoration: none;
    font-size: 20px; line-height: 1; user-select: none;
}
.cal4-arrow:hover { background: #2868b3; }
.cal4-arrow:disabled { background: #b9c2cc; cursor: default; }
.cal4-arrow:disabled:hover { background: #b9c2cc; }
/* Dins la tira, les cel·les del calendari poden ser una mica més compactes. */
/* Alçada FIXA (com un full de càlcul): no canvia amb la marca ni en navegar. */
.cal4-mes .calendar td { padding: 3px 3px; font-size: 14px; height: 40px; vertical-align: top; box-sizing: border-box; }
.cal4-mes .cal-days th { padding: 6px 3px; font-size: 13px; }
/* Responsive: quan no hi caben els 4 mesos de costat, s'apilen un sota l'altre. */
@media (max-width: 900px) {
    .cal4-strip { flex-direction: column; }
}

/* =====================================================================
   FORMULARIS D'ALTA (Alumne — screen2 / Entitat — screen3)
   ===================================================================== */
/* Coixí de la part central, IGUAL als quatre costats a totes les pàgines. */
.alta-wrap { padding: 11px; }

.alta-ok {
    background: #e7f3e2;
    border: 1px solid #bcdfb0;
    color: #3a7d34;
    padding: 12px 14px;
    border-radius: 5px;
    margin-bottom: 16px;
    font-weight: 600;
}
.alta-err {
    background: #fdecea;
    border: 1px solid #f3b9b0;
    color: #a12626;
    padding: 12px 14px;
    border-radius: 5px;
    margin-bottom: 16px;
}
.alta-err ul { margin: 6px 0 0 18px; }
/* Enllaç dins d'un avís vermell (p. ex. «Fes el conveni d'aquesta entitat →»):
   del mateix color que l'avís i subratllat, perquè es vegi que s'hi pot clicar
   sense que sembli que hi ha dos missatges. */
.alta-err-enllac { margin-left: 8px; color: inherit; font-weight: 700;
    text-decoration: underline; white-space: nowrap; }

.ent-radios {
    display: flex;
    gap: 34px;
    justify-content: center;
    padding: 6px 0 14px;
    font-size: 14px;
}
.ent-section {
    background: #f0f0f0;
    border: 1px solid #e2e2e2;
    padding: 9px 12px;
    font-size: 15px;
    font-weight: 700;
    color: #444;
    border-radius: 3px;
    margin: 16px 0 14px;
}
.ent-section small { font-weight: 400; font-size: 12px; color: #777; }
/* Títol del seguiment: sense rectangle, en NEGRE (text i línia), i a dalt de tot,
   a la mateixa posició que la barra de pestanyes («Cerca bàsica») dels llistats. */
.seg-titol-barra {
    font-size: 15px;
    font-weight: 700;
    color: #000;
    padding: 9px 4px;
    border-bottom: 2px solid #000;
    margin: 0 0 14px;
}
/* Camps deshabilitats: clarament grisos (es veu que no s'hi pot escriure, sense
   haver de clicar-hi). Cobreix input, select i textarea. */
.field input:disabled,
.field select:disabled,
.field textarea:disabled {
    background: #dfe3e7;
    color: #6b757e;
    -webkit-text-fill-color: #6b757e;   /* alguns navegadors difuminen el text deshabilitat */
    border-color: #ccd2d8;
    opacity: 1;
    cursor: not-allowed;
}

.alta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 44px;
}
.alta-col { display: flex; flex-direction: column; gap: 12px; }

/* Disseny per files (Alta Alumne): el DOM va esquerra→dreta perquè el TAB
   avanci horitzontalment i no de dalt a baix. */
.alta-rows { display: flex; flex-direction: column; gap: 12px; }
.alta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 44px; }
.alta-row.una { grid-template-columns: 1fr; }
.alta-row.tres { grid-template-columns: 1fr 1fr 1fr; }
.alta-row.quatre { grid-template-columns: 1fr 1fr 1fr 1fr; }
.alta-row.cinc { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) {
    .alta-row.tres,
    .alta-row.quatre,
    .alta-row.cinc { grid-template-columns: 1fr; }
}
/* Formulari amb els camps apilats a l'esquerra i els cicles formatius a la dreta
   (Tutors i Coordinadors, vista d'admin/coordinador). */
.alta-rows.camps-cicles { flex-direction: row; gap: 36px; align-items: flex-start; }
.camps-cicles .cc-camps { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.camps-cicles .cc-cicles { flex: 1 1 0; min-width: 0; }
@media (max-width: 900px) {
    .alta-rows.camps-cicles { flex-direction: column; gap: 12px; }
}

.field {
    display: grid;
    grid-template-columns: 155px 1fr;
    align-items: center;
    gap: 12px;
}
.field > label { text-align: right; font-size: 14px; color: #333; }

.field input[type="text"],
.field input[type="email"],
.field input[type="date"],
.field input[type="number"],
.field input[type="password"],
.field select,
.field textarea {
    width: 100%;
    border: 1px solid #b9c2cc;
    border-radius: 3px;
    padding: 8px 10px;
    font-size: 14px;
    font-family: inherit;
    color: #1f2d3d;
    background: #fff;
}
/* Camps numèrics (Hores): sense les fletxes amunt/avall del navegador. */
.field input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.field input[type="number"]::-webkit-outer-spin-button,
.field input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Focus: color lila per a totes les caixes (text, combos i àrees de text) */
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .20);
}
/* Camps de text obligatoris: vora vermella NOMÉS quan estan buits (o amb
   valor invàlid, p. ex. un correu mal format). Un cop omplerts, tornen a
   la vora normal. Els combos (select) NO es pinten de vermell. */
.field input.req:invalid,
.field select.req:invalid,
.field textarea.req:invalid { border-color: #c0392b; background: #fdeeee; }
/* Reforç per JS (botons-formulari.js): qualsevol camp obligatori buit, tingui o
   no la classe .req, queda marcat en vermell mentre no s'ompli. */
.camp-req-buit { border-color: #c0392b !important; background: #fdeeee; }
/* Camp que el SERVIDOR ha marcat com a erroni en desar (p. ex. una a/e que ja és
   d'un altre usuari): queda en vermell fins que es toca, per indicar on és el
   problema. No és el mateix cas que .camp-req-buit, que només mira si és buit. */
.camp-err { border-color: #c0392b !important; background: #fdeeee; }
/* (La pestanya amb alguna cosa obligatòria pendent es marca amb .pest-pendent,
   definida amb la resta d'estils de les pestanyes.) */

.field-inline { display: flex; gap: 8px; }
.field-inline .sel-tipus { flex: 0 0 120px; }
.field-inline input { flex: 1; }

.field-check input { justify-self: start; width: 20px; height: 20px; }

.field-wide { align-items: start; }
.field-wide textarea { min-height: 96px; resize: vertical; }

/* ---------- Formularis de config/tutors/coordinadors/centres ----------
   Etiqueta A SOBRE de la caixa de text (com a la variant compacta),
   en lloc de a l'esquerra. */
.alta-form.config-form .field {
    grid-template-columns: 1fr;
    gap: 4px;
}
/* Sense font-size: l'etiqueta es queda amb la mida base dels camps (14 px),
   igual a tot arreu (era 13 px i es notava al costat de les pestanyes on els
   camps van fora d'un .alta-form, com «Responsable»). */
.alta-form.config-form .field > label { text-align: left; }

/* ---------- Variant compacta (Alta Alumne) ----------
   Camps en files flexibles amb l'etiqueta a sobre i amplada a mida
   segons la capacitat de cada camp. */
.alta-form.compacta .fila {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 16px;
    align-items: flex-end;
}
.alta-form.compacta .field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    position: relative;   /* ancora l'avís sense afectar l'alçada del camp */
}
.alta-form.compacta .field > label { text-align: left; }
.alta-form.compacta .field-inline .sel-tipus { flex: 0 0 74px; }

/* Amplada de cada camp (flex-basis fixe; l'adreça s'estira fins al final). */
/* Document (el de l'alumne/a i el del tutor/a legal): el desplegable just per a
   «NIF/NIE/Passaport» i la caixa d'ample de 9 caràcters — els d'un NIF/NIE, no
   els 12 del maxlength (+22px de farciment i vores, que amb
   box-sizing:border-box hi van a dins). */
.alta-form.compacta .w-id       { flex: 0 0 auto; }
.alta-form.compacta .w-id .field-inline { gap: 6px; }
.alta-form.compacta .w-id .field-inline .sel-tipus { flex: 0 0 auto; width: auto; padding-left: 6px; padding-right: 6px; }
.alta-form.compacta .w-id .field-inline input      { flex: 0 0 auto; width: calc(9ch + 22px); }
.alta-form.compacta .w-nom      { flex: 0 0 150px; }
.alta-form.compacta .w-cognoms  { flex: 0 0 180px; }
.alta-form.compacta .w-cognoms2 { flex: 0 0 360px; }   /* cognoms el doble d'ample */
.alta-form.compacta .w-cognoms-fill { flex: 1 1 200px; min-width: 150px; }  /* creix/encongeix primer, fins a la mida del "nom" */
.alta-form.compacta .w-data     { flex: 0 0 160px; }
.alta-form.compacta .w-sexe     { flex: 0 0 150px; }
/* ⚠ Només a l'alta d'ALUMNAT: la data i el sexe s'ajusten al contingut (la
   caixa de data del navegador i l'opció més llarga del desplegable). .w-data
   també el fan servir «Acords» i «Centres», que es queden com estaven. */
#form-alumne.compacta .w-data        { flex: 0 0 auto; }
#form-alumne.compacta .w-data input  { width: auto; }
#form-alumne.compacta .w-sexe        { flex: 0 0 auto; }
#form-alumne.compacta .w-sexe select { width: auto; }
.alta-form.compacta .w-tel       { flex: 0 0 auto; }
/* ⚠ Ample de 9 caràcters (els d'un telèfon d'aquí), no els 12 del maxlength:
   la caixa s'ajusta al que s'hi escriu de debò. +22px de farciment i vores. */
.alta-form.compacta .w-tel input { width: calc(9ch + 22px); }
.alta-form.compacta .w-adreca   { flex: 1 1 220px; min-width: 150px; }
.alta-form.compacta .w-ae       { flex: 0 0 190px; }
/* Igual que el telèfon: ample de 5 caràcters, els d'un codi postal. */
.alta-form.compacta .w-cp       { flex: 0 0 auto; }
.alta-form.compacta .w-cp input { width: calc(5ch + 22px); }
/* Prou ample per a «La Selva del Camp» (17 car.), que fa de mida màxima de
   referència encara que el camp admeti noms més llargs. +22px de farciment i
   vores, +28px del triangle que obre la llista (hi va a dins de la caixa). */
.alta-form.compacta .w-poblacio { flex: 0 0 calc(17ch + 50px); }
.alta-form.compacta .w-catsalut { flex: 0 0 160px; }
.alta-form.compacta .w-nass     { flex: 0 0 140px; }
/* Contrasenya: ample de 9 caràcters, com l'ID i el telèfon. */
.alta-form.compacta .w-pass       { flex: 0 0 auto; }
.alta-form.compacta .w-pass input { width: calc(9ch + 22px); }
.alta-form.compacta .w-tutor    { flex: 1 1 200px; min-width: 150px; }  /* omple la resta de la 2a fila */

/* ⚠ Alta d'ALUMNAT amb la pantalla ampliada (zoom del 150 %) o la finestra
   estreta: cada fila es manté SENCERA. Abans les caselles saltaven de línia
   d'una en una —l'A/e queia tota sola sota la 1a fila i el tutor/a legal sota la
   2a—; ara, en lloc de saltar, s'estrenyen fins al mínim que necessiten.
   La condició mira l'amplada REAL de què disposen els camps (@container), no la
   de la finestra: així ja hi van descomptats el menú lateral, els coixins i la
   barra de desplaçament, i no cal endevinar-ne cap mida.
   Per sota d'aquest mínim (1010px) es torna al comportament de sempre: les
   caselles reparteixen com poden en més d'una línia, que és millor que sortir
   per fora del marc. */
#form-alumne.compacta .alta-rows { container-type: inline-size; container-name: filaalumne; }
@container filaalumne (min-width: 1010px) {
    #form-alumne.compacta .fila { flex-wrap: nowrap; }
}
/* Caselles que poden cedir amplada. El flex-basis NO canvia: mentre hi hagi
   espai es veuen EXACTAMENT igual que abans (al 100 % de zoom no es mou res);
   només s'hi afegeix fins on poden encongir-se, que és el punt on l'etiqueta
   encara hi cap en una sola línia. Les que tenen l'amplada lligada al contingut
   (ID, data, sexe, telèfon, CP i contrasenya) es queden com estan. */
#form-alumne.compacta .w-nom          { flex: 0 1 150px; min-width: 100px; }
#form-alumne.compacta .w-cognoms-fill { min-width: 110px; }
#form-alumne.compacta .w-ae           { flex: 0 1 190px; min-width: 120px; }
#form-alumne.compacta .w-adreca       { min-width: 100px; }
#form-alumne.compacta .w-poblacio     { flex: 0 1 calc(17ch + 50px); min-width: 125px; }
#form-alumne.compacta .w-catsalut     { flex: 0 1 160px; min-width: 122px; }
#form-alumne.compacta .w-nass         { flex: 0 1 140px; min-width: 100px; }
#form-alumne.compacta .w-tutor        { min-width: 100px; }
/* La llista desplegable de poblacions es queda a la seva amplada de lectura
   («La Selva del Camp») encara que la caixa s'hagi hagut d'estrènyer. */
#form-alumne.compacta .w-poblacio .combo-llista { min-width: calc(17ch + 50px); }

/* Nota informativa sota un camp (p. ex. "deixa la contrasenya en blanc"). */
.camp-nota { color: #777; font-size: 12px; line-height: 1.2; }

/* Grup de checkboxos dels cicles formatius (tutors.php). */
.cicles-checks { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
.cicles-checks label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #1f2d3d;
    cursor: pointer;
}
.cicles-checks input[type="checkbox"] { accent-color: #7c3aed; }

/* Versió agrupada per famílies professionals (llista llarga, desplegables).
   Totes les famílies es veuen; els cicles s'obren amb el símbol +. */
.cicles-grups {
    border: 1px solid #b9c2cc;
    border-radius: 3px;
    padding: 6px 10px;
    background: #fff;
    gap: 0;
    /* En desplegar una família, la llista de cicles pot ser molt llarga (Sanitat
       en té 27): la caixa creixia més que la finestra i quedava tallada per sota.
       Ara s'atura abans d'arribar a baix de tot i es desplaça per DINS. Amb poques
       famílies obertes la caixa segueix fent només el que ocupa el contingut. */
    max-height: 60vh;
    overflow-y: auto;
}
/* Cicles en dues columnes (Tutors): la meitat de famílies a cada costat, ocupant
   el mateix espai. Cada família no es parteix entre columnes. */
.cicles-2col { display: block; columns: 2; column-gap: 18px; }
.cicles-2col .cicles-fam { break-inside: avoid; margin-bottom: 4px; }
.cicles-4col { display: block; columns: 4; column-gap: 18px; }
.cicles-4col .cicles-fam { break-inside: avoid; margin-bottom: 4px; }
@media (max-width: 1100px) { .cicles-4col { columns: 3; } }
@media (max-width: 820px)  { .cicles-4col { columns: 2; } }
@media (max-width: 560px)  { .cicles-4col { columns: 1; } }
.cicles-fam summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    padding: 5px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;                 /* sense el triangle per defecte */
}
.cicles-fam summary::-webkit-details-marker { display: none; }
/* Símbol + / − davant de cada família */
.cicles-fam summary::before {
    content: '+';
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    line-height: 14px;
    text-align: center;
    border: 1px solid #b9c2cc;
    border-radius: 3px;
    color: #7c3aed;
    font-weight: 700;
    background: #f7f8fa;
}
.cicles-fam[open] summary::before { content: '−'; }
.cicles-fam summary small { font-weight: 400; color: #777; }
.cicles-fam .cicles-llista {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 2px 0 8px 18px;
}

/* Formulari compacte estret: quan ja no hi caben en fila, cada camp
   ocupa tota l'amplada i queden un sota l'altre. */
@media (max-width: 720px) {
    .alta-form.compacta .field { flex: 1 1 100%; min-width: 0; }
    /* Les caselles d'Alumnat amb amplada pròpia van marcades amb #form-alumne i,
       si no es repeteix aquí, hi guanyarien elles i no s'apilarien. */
    #form-alumne.compacta .field { flex: 1 1 100%; min-width: 0; }
}

/* Amplades dels camps d'Alta Entitat (variant compacta).
   Els desplegables de la fila de «Dades» van a width:auto: el navegador els fa
   just de l'amplada que necessiten (l'opció més llarga o, si és més ampla,
   l'etiqueta de sobre), i s'hi ajusten sols si es donen d'alta tipus nous des
   de Manteniment. */
.alta-form.compacta .we-doc      { flex: 0 0 auto; }
.alta-form.compacta .we-doc .field-inline { gap: 6px; }
/* El desplegable, just per a «CIF/NIF/NIE»; la caixa, per a 9 caràcters — els
   d'un CIF/NIF/NIE, com la del responsable i la del tutor/a d'entitat
   (+22px de farciment i vores, que amb box-sizing:border-box hi van a dins). */
.alta-form.compacta .we-doc .sel-tipus { flex: 0 0 auto; width: auto; padding-left: 6px; padding-right: 6px; }
.alta-form.compacta .we-doc input      { flex: 0 0 auto; width: calc(9ch + 22px); }
.alta-form.compacta .we-sector   { flex: 0 0 auto; }
.alta-form.compacta .we-nombre   { flex: 0 0 auto; }
.alta-form.compacta .we-sector select,
.alta-form.compacta .we-nombre select { width: auto; }
/* CCAE: el text que hi surt («codi — descripció») és llarg, així que el camp
   s'endú l'espai que li queda a la fila en comptes de quedar-se curt als 300px
   d'abans, i encongeix fins a 220px quan la finestra és estreta. */
.alta-form.compacta .we-ccae     { flex: 1 1 300px; min-width: 220px; }
.alta-form.compacta .we-nom      { flex: 1 1 240px; min-width: 240px; }
.alta-form.compacta .we-tipus    { flex: 0 0 210px; }   /* cap l'opció més llarga */
/* ⚠ Només a la pestanya «Dades» de l'entitat: .we-tipus també el fa servir el
   formulari d'ACORDS i .we-nom la pestanya de CENTRES DE TREBALL, que es queden
   com estaven. Aquí el tipus s'estreny a mida i el nom s'endú tot el que sobra
   de la fila (el CCAE ja no creix). */
.alta-form.compacta [data-pest="entitat"] .we-tipus        { flex: 0 0 auto; }
.alta-form.compacta [data-pest="entitat"] .we-tipus select { width: auto; }
.alta-form.compacta [data-pest="entitat"] .we-nom          { flex: 1 1 200px; min-width: 200px; }
/* CP i telèfon: la caixa fa exactament el seu màxim de caràcters (maxlength),
   com la del document, i el camp s'ajusta a la caixa. */
.alta-form.compacta .we-cp        { flex: 0 0 auto; }
.alta-form.compacta .we-cp input  { width: calc(8ch + 22px); }    /* màx. 8 car. */
/* Desplegable escrivible: prou ample per a «La Selva del Camp» (17 car.), que
   fa de mida màxima de referència encara que el camp admeti noms més llargs
   (els de la llista, si no hi caben, es parteixen en dues línies). +22px de
   farciment i vores, +28px del triangle que obre la llista. */
.alta-form.compacta .we-poblacio  { flex: 0 0 calc(17ch + 50px); }
.alta-form.compacta .we-adreca    { flex: 1 1 260px; min-width: 260px; }
.alta-form.compacta .we-tel       { flex: 0 0 auto; }
.alta-form.compacta .we-tel input { width: calc(12ch + 22px); }   /* màx. 12 car. */

/* ---------- Acords: selectors d'alumne/a, estudi, entitat i centre ----------
   minmax(0, 1fr) i no pas 1fr: si no, cada columna té una amplada mínima igual
   a la del seu contingut, i un text que no es pot partir (el nom d'un estudi
   llarg) eixamplaria la graella i trauria la resta fora del marc. */
/* ⚠ Els QUATRE quadres de la pestanya «Dades» (alumne/a, cicle formatiu, entitat
   i centre de treball) van SEMPRE en UNA fila de quatre columnes: és una sola
   tria feta de quatre passos i es vol veure sencera d'un cop d'ull.
   Quan hi ha menys espai, primer s'estreny la separació i el coixí dels quadres
   —el text llarg ja s'escurça amb «…» dins de cada fila— i només amb la finestra
   molt petita es passa a 2×2. Abans es partia als 1400 px, que és més ample que
   moltes pantalles de portàtil: gairebé sempre es veia en dues files. */
.acord-cols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 18px;
}
@media (max-width: 1500px) { .acord-cols { gap: 12px; } }
@media (max-width: 1000px) { .acord-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
.picker { border: 1px solid #ddd; border-radius: 5px; background: #fff; padding: 12px; min-width: 0; }
/* Amb la finestra justa, els quadres aprimen el coixí abans de partir la fila. */
@media (max-width: 1500px) { .picker { padding: 10px 8px; } }
.picker.amagat { display: none; }

/* Pendent: en vermell mentre no s'hi hagi seleccionat res. */
.picker.pendent { border-color: #d8232a; }
.picker.pendent h4 { color: #d8232a; }
.field select.pendent { border-color: #d8232a; color: #d8232a; }
/* Títol del quadre: de la mateixa mida I pes que les files de sota (14 px,
   normal). El <h4> el posaria en negreta i es veuria més gros que la llista;
   qui el fa destacar mentre no s'hi ha triat res és el vermell, no el pes. */
.picker h4 { margin: 0 0 10px; font-size: 14px; font-weight: 400; color: #444; }
.picker-cerca {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 8px;
}
/* overflow-x amagat: res no s'escapa de costat; el que no hi càpiga es retalla. */
.picker-llista { max-height: 240px; overflow-y: auto; overflow-x: hidden; border: 1px solid #eee; border-radius: 4px; }
.picker-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    font-size: 14px;
    cursor: pointer;
    border-bottom: 1px solid #f2f2f2;
}
.picker-item:last-child { border-bottom: 0; }
.picker-item:hover { background: #f5f9ff; }
.picker-item:has(input:checked) { background: #e8f1fc; }
/* Fila d'un quadre que NOMÉS es pot mirar: l'acord és d'un altre tutor/a de
   centre i no s'hi pot canviar res. Hi surt qui hi consta, en gris i sense
   resposta al ratolí (els mateixos colors que un camp deshabilitat). El
   selector va pel .picker-llista per guanyar el «:has(input:checked)» de sobre. */
.picker-llista .picker-item.picker-nomes-lectura,
.picker-llista .picker-item.picker-nomes-lectura:hover { background: #f0f2f4; color: #6b757e; cursor: default; }
/* Amb les columnes estretes, el text llarg s'escurça amb «…» en comptes
   d'eixamplar la targeta. El radio no encongeix mai; el text principal i el
   secundari sí, i s'acaben amb «…». */
.picker-item input { flex: 0 0 auto; }
.picker-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.picker-item small {
    color: #888;
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    /* De la mida del text del costat (l'etiqueta <small> el faria més petit
       i baixaria dels 14 px mínims de la interfície). */
    font-size: inherit;
}
.picker-buida { color: #888; font-size: 13px; padding: 10px 2px; }
/* Cercador d'un quadre de tria sense res a filtrar (encara no s'ha triat
   l'entitat, o no té responsables): fa nosa i no surt. */
.picker-cerca.oculta { display: none; }
/* A les pestanyes d'acord amb un sol quadre (Responsable, Tutor/a d'entitat,
   Tutor/a de centre, Seguretat Social i Extres) i a la de Període, el contingut
   NO va dins d'una caixa amb vora: es treu el marc gris perquè quedi net. (Les
   pestanyes «Dades» i «Calendari» conserven els seus quadres.) */
.pest-panell[data-pest="responsable"] .picker,
.pest-panell[data-pest="tutor"] .picker,
.pest-panell[data-pest="tutor_centre"] .picker,
.pest-panell[data-pest="seg_social"] .picker,
.pest-panell[data-pest="extres"] .picker,
.pest-panell[data-pest="fi"] .periode {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
}
/* ★ del teu preferit a l'entitat (acords.php): porta explicació. */
.resp-preferit { cursor: help; }
.centres-tria { margin-top: 10px; }
.centres-titol { font-size: 13px; font-weight: 600; color: #444; margin-bottom: 6px; }
.acord-resum {
    background: #f0f7ff;
    border: 1px solid #cfe3f8;
    border-radius: 5px;
    padding: 10px 14px;
    font-size: 14px;
    margin-bottom: 14px;
    /* Un nom molt llarg i sense espais (un correu, posem) s'ha de partir abans
       que sortir del quadre. */
    overflow-wrap: anywhere;
}
.acord-resum.oculta { display: none; }

/* ---------- Acords · pestanya «Període» (horari de l'estada) ---------- */
.periode {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 14px;
    margin-bottom: 16px;
    background: #fff;
}
.periode-cap { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.periode-titol { font-size: 15px; font-weight: 700; color: #444; }
.periode-dates { font-size: 14px; color: #667; }
.periode-cap .periode-treu { margin-left: auto; }
.periode-accions { margin-bottom: 4px; }
/* Línia horitzontal que SEPARA períodes consecutius: els períodes d'un acord van
   encadenats (cada un comença l'endemà que acaba l'anterior), i la ratlla els
   separa. Es dibuixa al buit ENTRE dos períodes (marge ampliat a 26px), d'una
   banda a l'altra; abans del primer i després de l'últim no n'hi ha. */
#periodes .periode { position: relative; }
#periodes .periode + .periode { margin-top: 26px; }
#periodes .periode + .periode::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -13px;
    height: 2px;
    background: #9aa7b8;
    border-radius: 2px;
}

/* table-layout: fixed -> les 5 columnes de la taula reparteixen l'amplada per
   igual, sense dependre del contingut. */
.taula-horari { width: 100%; border-collapse: collapse; table-layout: fixed; }
.taula-horari thead th {
    background: #f5f6f8;
    border-bottom: 1px solid #dfe4e9;
    padding: 8px 10px;
    font-size: 14px;
    color: #4a5560;
    text-align: center;
}
.taula-horari tbody th {
    text-align: left;
    font-weight: 400;
    font-size: 14px;
    color: #333;
    padding: 4px 10px 4px 2px;
    white-space: nowrap;
}
.taula-horari tbody tr:nth-child(even) { background: #fafbfc; }
.taula-horari td { padding: 4px; }
.taula-horari input.hora {
    width: 100%;
    min-width: 0;
    border: 1px solid #b9c2cc;
    border-radius: 3px;
    padding: 6px 8px;
    font-size: 14px;
    font-family: inherit;
    color: #1f2d3d;
    background: #fff;
}
.taula-horari input.hora:disabled { background: #eef0f2; color: #7b8794; }
/* Tram invàlid (primera hora posterior a la segona): camps en vermell. */
.taula-horari input.hora.hora-error { border-color: #d8232a; background: #fdecea; color: #d8232a; }

/* Desplegable per triar l'hora amb el ratolí (el munta periode.js). */
.hora-llista {
    position: absolute;
    z-index: 60;
    max-height: 210px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #bbb;
    border-radius: 4px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}
.hora-llista.oculta { display: none; }
.hora-item { padding: 6px 14px; font-size: 14px; cursor: pointer; }
.hora-item:hover { background: #e8f1fc; }
.hora-item.sel { background: #dfe7ef; font-weight: 600; }

/* Columna de l'esquerra (dates + hores + botó) al costat de l'horari, com a
   periodes_nous.jpg. Alineada a dalt perquè «Data d'inici» quedi a l'alçada
   de «Dilluns». */
/* 6 columnes de la mateixa amplada que omplen tot l'ample: la columna
   d'informació (1 part) + la taula amb les 5 columnes de l'horari (5 parts). */
.horari-zona { display: grid; grid-template-columns: 1fr 5fr; align-items: stretch; gap: 24px; margin-bottom: 14px; }
.horari-zona .taula-scroll { min-width: 0; }
.horari-lateral {
    display: flex;
    flex-direction: column;
    /* Els camps s'apilen des de dalt: «Data d'inici» va just sota la casella
       «calcula el període automàticament», i la resta a continuació. El
       padding-top iguala el de la capçalera de la taula (.taula-horari thead th)
       perquè «Data d'inici» quedi a la mateixa alçada que «Matí». */
    justify-content: flex-start;
    gap: 12px;
    padding-top: 8px;
    padding-bottom: 4px;
}
/* Data amb l'etiqueta a sobre: mides mínimes de la web (lletra 14 px,
   separació 4 px, camp tan alt com els de l'hora). */
.lat-camp { display: flex; flex-direction: column; gap: 4px; }
.lat-camp label { font-size: 14px; color: #333; }
.lat-camp input[type="date"] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #b9c2cc;
    border-radius: 3px;
    padding: 6px 8px;
    font-size: 14px;
    font-family: inherit;
    color: #1f2d3d;
    background: #fff;
}
.lat-camp input[readonly] { background: #eef0f2; color: #7b8794; }
/* Data en vermell: període encavalcat amb un altre, o fi anterior a l'inici.
   .solapa-error és el mateix vermell, però el posa el servidor quan l'acord no
   s'ha pogut crear per encavalcament d'horaris amb un altre acord de l'alumne/a.
   ⚠ Ha de ser una classe a part: periode.js treu .data-error a cada recàlcul.
   El dibuix és un de sol —si canvia, canvia per als dos casos alhora. */
.lat-camp input.data-error,
.lat-camp input.solapa-error { border-color: #d8232a; color: #d8232a; background: #fdecea; }
.horari-lateral .p-replicar { align-self: flex-start; }
@media (max-width: 900px) {
    .horari-zona { grid-template-columns: 1fr; }
    .horari-lateral { padding-top: 0; justify-content: flex-start; }
}
.hores-text { font-size: 14px; color: #333; margin: 0; }
.hores-text b { font-weight: 700; color: #1f2d3d; }
/* Hores totals per sota de les demanades: en vermell per avisar. */
.hores-text b.hores-insuficient { color: #d8232a; }
.btn-crear.btn-sm { padding: 7px 14px; font-size: 14px; }

/* Camps de només lectura (la contrasenya actual a config.php): aspecte gris,
   com un camp deshabilitat. */
.alta-form input.camp-vista,
input.camp-vista { background: #eef0f2; color: #444; cursor: default; }

/* ---------- Camps d'un formulari en una sola fila, d'igual amplada, omplint
   tot l'ample (CCAE, cicles formatius, centres…). Es reparteixen a parts
   iguals i s'ajusten en pantalles estretes. ---------- */
.camps-fila {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 16px;
    align-items: flex-start;
    margin-bottom: 4px;
}
.camps-fila > .field {
    flex: 1 1 180px;
    min-width: 0;
    /* Etiqueta A SOBRE del camp. Cal dir-ho aquí i no confiar en el formulari:
       a les pestanyes «Responsable» i «Tutor/a d'entitat» d'entitats.php els
       camps es pinten fora de cap .alta-form (són del formulari de l'entitat,
       amb form="form-entitat"), i el .field per defecte posa l'etiqueta a
       l'esquerra. Les altres files d'aquesta mena van dins de .config-form,
       que ja les hi posa i mana sobre aquesta regla. */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
}
.camps-fila > .field > label { text-align: left; }
/* Amplades per tipus de camp dins d'una fila de formulari: així hi caben tots
   en UNA sola línia i el llistat de sota guanya files. El camp «ample» (un nom
   llarg) és l'únic que creix; els numèrics just per a 4 xifres. */
.camps-fila > .field.camp-codi  { flex: 0 1 140px; }
.camps-fila > .field.camp-curt  { flex: 0 1 150px; }
.camps-fila > .field.camp-num   { flex: 0 1 110px; }
.camps-fila > .field.camp-ample { flex: 1 1 220px; min-width: 150px; }
/* Bloc NIF/NIE compacte (pestanya Tutor/a): el desplegable just per «NIF/NIE» i
   el document d'uns 9 caràcters, per deixar lloc a la resta de camps (contrasenya). */
.camps-fila > .field.field-doc { flex: 0 0 auto; }
.field-doc .field-inline { gap: 6px; }
.field-doc .field-inline .sel-tipus { flex: 0 0 auto; width: auto; padding-left: 6px; padding-right: 6px; }
/* +22px de farciment i vores (box-sizing:border-box, hi van a dins): amb 10ch
   pelats el NIF de 9 caràcters no hi cabia i s'havia de desplaçar. */
.field-doc .field-inline input { flex: 0 0 auto; width: calc(9ch + 22px); }

/* Telèfon (pestanya «Tutor/a d'entitat»): la caixa fa 9 caràcters, que és només
   la MIDA; el camp n'admet més i el text es va desplaçant dins la caixa. */
.camps-fila > .field.camp-tel { flex: 0 0 auto; }
.camps-fila > .field.camp-tel input { width: calc(9ch + 22px); }

/* Contrasenya (pestanya «Tutor/a d'entitat»): la caixa fa 9 caràcters, que és
   només la MIDA; s'hi poden escriure els que es vulgui (maxlength="72") i el
   text es va desplaçant dins la caixa. */
.camps-fila > .field.camp-pass { flex: 0 0 auto; }
.camps-fila > .field.camp-pass input { width: calc(9ch + 22px); }

/* ---------- Alumnat: caselles de filtre del llistat (centre / cicle) ---------- */
.filtre-centre {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin: 4px 0 12px;
}
.check-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
}
.check-inline input[type="checkbox"] { margin: 0; }
/* Diverses caselles de filtre, una sota l'altra. */
.check-inline.check-bloc { display: flex; }
.check-bloc + .check-bloc { margin-top: 6px; }
/* Casella obligatòria desmarcada (pestanya «Extres» d'acords): text i casella en
   vermell per avisar que cal marcar-la per poder crear l'acord. */
.chk-pendent { color: #c0392b; }
.chk-pendent input[type="checkbox"] { accent-color: #c0392b; outline: 1px solid #c0392b; outline-offset: 1px; }

/* ---------- Festius (admin): capçalera del llistat amb el selector d'any ---------- */
.festius-cap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 14px;
}
/* Barra d'esborrat múltiple del llistat de festius (Ctrl/Majúscules per triar). */
.festius-elim { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.festius-elim-info { font-size: 14px; color: #56616c; }
.festius-elim .btn-eliminar { margin: 0; }
/* Formulari de festius: tots els camps en una fila d'igual amplada, alineats
   a dalt, omplint tot l'ample. */
.festius-fila {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 16px;
    align-items: flex-start;
    margin-bottom: 4px;
}
/* Per defecte els camps creixen (nom i població omplen l'ample que queda). */
.festius-fila .field { flex: 1 1 180px; min-width: 0; }
/* Dates i àmbit: amplada mínima fixa. Les dates, prou perquè es vegi
   «dd/mm/aaaa» i la icona del calendari; res més. */
.festius-fila .festius-data  { flex: 0 0 150px; }
.festius-fila .festius-ambit { flex: 0 0 150px; }
.festius-any { display: flex; align-items: center; gap: 8px; }
/* Secció «Festius»: separació entre el títol del llistat, el filtre d'any i la
   taula (les mides mínimes de la interfície: res enganxat). */
.festadm-filtre { margin: 10px 0 12px; }
/* Textos: totes les etiquetes separades igual del que tenen a sobre. La primera
   ja té els 16px del coixí del marc de la pestanya; les altres se'ls posen aquí
   (abans anaven enganxades al camp anterior). */
.pest-panell[data-pest="textos"] .field.una + .field.una { margin-top: 16px; }
.festius-any label { font-size: 14px; color: #333; }
/* Mides mínimes de la web: lletra 14 px i alçada com la dels altres camps. */
.festius-any select {
    border: 1px solid #b9c2cc;
    border-radius: 3px;
    padding: 8px 10px;
    font-size: 14px;
    font-family: inherit;
    color: #1f2d3d;
    background: #fff;
}

/* ---------- Paginació del llistat ---------- */
.paginacio {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 14px;
}
.paginacio .pag-link {
    display: inline-block;
    padding: 7px 14px;
    border: 1px solid #b9c2cc;
    border-radius: 4px;
    font-size: 14px;
    color: #1f2d3d;
    background: #fff;
    text-decoration: none;
}
.paginacio a.pag-link:hover { background: #eef3f8; border-color: #2f7ed8; }
.paginacio .pag-link.inactiu { color: #aab3bc; background: #f5f6f8; cursor: default; }
.paginacio .pag-info { font-size: 14px; color: #333; }

/* ---------- Acords · pestanya «Calendari» ---------- */
/* Secció «Colors» (admin): graella de selectors de color. */
.colors-graella { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 20px; margin: 10px 0 6px; }
.color-item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #33414d; }
.color-item input[type="color"] { width: 42px; height: 30px; border: 1px solid #ccd2d8; border-radius: 4px; padding: 0; cursor: pointer; background: none; }

/* Seguiment mensual d'un acord. */
.seg-nota { display: flex; align-items: center; gap: 10px; margin: 8px 0 14px; font-size: 15px; }
.seg-nota input { width: 90px; }
.seg-nota-val { font-weight: 700; font-size: 18px; color: #1f2933; }
.seg-mes { margin-bottom: 16px; }
/* Bloc sota cada calendari del seguiment: valoracions + botó de signar. El text
   va en NEGRE i a 14 px (la mida mínima de la web, la de l'etiqueta «Nom:»). */
.seg-tile { margin-top: 6px; font-size: 14px; color: #000; }
/* La llista desplegable va al costat de l'etiqueta MENTRE hi càpiga; si no, baixa
   a la línia de SOTA (flex-wrap) i es queda dins de la columna del mes
   (max-width). ⚠ Mai no ha de sobresortir cap al mes següent: hi quedaria pintada
   a sobre del text d'aquell mes. */
.seg-val-linia { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; flex-wrap: wrap; }
.seg-val-lbl { flex: 0 0 auto; }   /* etiqueta a mida; la llista va JUST a continuació */
.seg-val-inp { font-size: 14px; text-align: left; max-width: 100%; min-width: 0; }
.seg-val-val { font-weight: 700; color: #000; }
/* Comentari que l'alumne/a escriu l'últim dia del mes, tal com el veuen el tutor/a
   de centre i el d'entitat: sota el mes i abans de les valoracions. Pot ser llarg,
   així que l'etiqueta va a dalt i el text a sota, amb els salts de línia tal com
   els va escriure. */
.seg-tile-comentari { margin-bottom: 6px; }
.seg-tile-comentari-txt {
    display: block; white-space: pre-wrap; overflow-wrap: anywhere;
    color: #33414d; background: #f5f6f8; border: 1px solid #e0e4e8;
    border-radius: 4px; padding: 4px 8px; margin-top: 2px;
}
.seg-tile-signat { color: #2e9e5b; font-weight: 700; margin: 4px 0; }
.seg-signa:disabled { background: #b9c2cc; cursor: default; }
.seg-signa:disabled:hover { background: #b9c2cc; }
.seg-notes { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-bottom: 12px; }
.seg-nota-frase { font-size: 16px; color: #1f2933; margin: 4px 0 14px; }
/* Nota única del seguiment: camp + text d'ajuda al costat. */
.seg-nota-unica { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 8px 0 14px; }
.seg-nota-unica label { font-weight: 400; font-size: 15px; color: #1f2933; }
.seg-nota-unica input { width: 80px; font-size: 15px; padding: 6px 8px; }
.seg-nota-unica .camp-nota { margin: 0; font-size: 15px; color: #111; }
/* Nota per ENTITAT: nom de l'empresa al costat del camp; i, per a qui no la pot
   escriure, el valor com a text amb la mateixa mida que el camp. */
.seg-nota-unica .seg-nota-ent { font-size: 15px; color: #1f2933; font-weight: 600; }
.seg-nota-unica .seg-nota-valor { font-size: 15px; color: #1e5aa8; font-weight: 600; min-width: 34px; }
/* Mitjana de les notes, a sobre de la llista de notes per entitat. */
.seg-nota-mitjana { font-size: 15px; color: #1f2933; margin: 8px 0 4px; }
.seg-nota-mitjana b { color: #1e5aa8; font-weight: 600; }
.seg-hores-resum { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0 0 14px; font-size: 15px; color: #1f2933; }
.seg-hores-resum b { color: #1e5aa8; font-weight: 600; }
/* Exempció i «Hores reals»: van DINS del resum d'hores (.seg-hores-resum), a la
   mateixa línia que la resta i amb la seva mateixa separació (el «gap» del
   contenidor); si no hi caben a la finestra, el flex-wrap les baixa. Les hores
   exemptes (o «Sense exempció») van en VERD, i les reals (signades + exempció,
   que calcula seguiment.js) en VERD si arriben a les del cicle i en VERMELL si
   no (el mateix vermell de l'avís de falten hores). */
.seg-exempcio { font-size: 15px; color: #1f2933; }
.seg-exempcio b { color: #1e874b; font-weight: 600; }
/* Hores que ARRIBEN a les del cicle formatiu (verd) o no (vermell). Val tant per a
   la vista d'un seguiment com per a la cel·la «Hores planificades» del llistat.
   ⚠ Calen les tres formes de cada regla: dins de .seg-exempcio hi guanyaria el
   verd de «.seg-exempcio b», i al llistat el gris de «.taula-llista td». */
.hores-ok, .seg-exempcio b.hores-ok, .taula-llista td.hores-ok { color: #1e874b; font-weight: 600; }
.hores-ko, .seg-exempcio b.hores-ko, .taula-llista td.hores-ko { color: #a3271c; font-weight: 600; }
/* Casella d'hores de la fitxa d'exempcions, a la mida de la resta de camps. */
.exemp-hores { width: 90px; font-size: 15px; padding: 6px 8px; }
/* Columna «Exempció» del llistat: una línia per cicle formatiu. */
.exemp-fila { white-space: nowrap; line-height: 18px; }
.seg-finalitzat-avis { margin: 0 0 14px; padding: 8px 12px; border-radius: 6px;
    background: #e9f7ee; color: #1e5a37; border: 1px solid #b7e0c4; font-size: 15px; }
/* Falten hores per arribar a les del cicle: l'avís va en VERMELL. */
.seg-falten-avis { margin: 0 0 8px; padding: 8px 12px; border-radius: 6px;
    background: #fdecea; color: #a3271c; border: 1px solid #f2b8b1; font-size: 15px; }
/* Seguiment finalitzat que ja té totes les hores fetes: només cal tancar-lo. */
.seg-fet-tot { margin: 0 0 14px; padding: 8px 12px; border-radius: 6px;
    background: #e9f7ee; color: #1e5a37; border: 1px solid #b7e0c4; font-size: 15px; }
/* Dies del calendari de seguiment: clicables, amb la marca d'estat sota el dia.
   El número del dia sempre en negre (mai gris); l'estat es distingeix per la
   marca (✓ / número / ✗), no per l'opacitat. */
.seg-dia { cursor: pointer; font-weight: 700; line-height: 1.1; color: #111; }
.seg-dia .seg-n { display: block; }
.seg-dia .seg-marca { display: block; font-size: 12px; line-height: 1; margin-top: 1px; }
/* El COLOR DEL NÚMERO indica l'assistència (la casella queda blava, «dia a l'empresa»):
   negre = sense marcar · verd = hi ha anat · taronja = no totes les hores · vermell = no hi ha anat. */
/* Doble classe (.seg-dia.seg-…) perquè guanyi a «.calendar td { color }». */
.seg-dia.seg-sense   { color: #111; }
.seg-dia.seg-complet { color: #1e874b; }
.seg-dia.seg-parcial { color: #d35400; }
.seg-dia.seg-cap     { color: #c0392b; }
/* Dia d'un mes ja signat: es veu però no es pot editar. */
.seg-bloq    { cursor: default; }
.seg-festiu-dia { color: #111; }
.seg-fora { background: #fafbfc; color: #111; }
/* Dia futur: es veu (amb el color de l'horari) però atenuat i sense poder marcar. */
.seg-futur { cursor: default; opacity: .45; font-weight: 700; color: #111; }
/* Botó «He anat tots els dies» sota cada mes. */
.seg-heanat { margin-top: 8px; display: block; }
/* Botons de la caixa (Completa, Signa, Desfés): apilats i mai enganxats. */
.seg-tile .btn-mini { display: block; width: -moz-fit-content; width: fit-content; margin-top: 6px; }
/* Botonera del mes: «Completa» i «Signa» en fila, un al costat de l'altre. */
.seg-tile-botons { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.seg-tile-botons .btn-mini { display: inline-block; width: auto; margin-top: 0; }
.seg-tile-botons .seg-tile-signat { margin: 0; }
/* Mostres de la llegenda amb marca (✓ / n / ✗) en comptes de color pla. */
.cal-swatch.seg-sw-marca { display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #33414d; }
/* Finestra d'opcions d'un dia. */
.seg-opcions { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 14px; }
.seg-op { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.seg-parcial-in { width: 70px; text-align: center; }
/* Resum mensual (comentaris + signatura), sota el calendari. */
.seg-mesos-info { margin-top: 20px; }
.seg-mes-info { border: 1px solid #d9dee3; border-radius: 6px; padding: 10px 14px; margin-bottom: 10px; }
.seg-mes-titol { font-weight: 700; color: #2f7ed8; margin-bottom: 4px; }
.seg-signat { color: #2e9e5b; font-weight: 700; font-size: 13px; margin-left: 8px; }
.seg-coment { font-size: 14px; margin: 4px 0; color: #33414d; }
.seg-mes-info form { margin-top: 6px; }

/* Centres (empreses) de l'alumne al seguiment: targetes clicables. */
.seg-grup-tit { font-size: 15px; color: #33414d; margin: 16px 0 8px; }
.seg-centres { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
.seg-centre {
    display: block; width: 240px; padding: 12px 14px; border: 1px solid #d9dee3;
    border-left: 4px solid #2f7ed8; border-radius: 6px; background: #fff;
    text-decoration: none; color: #2b3640; transition: box-shadow .12s, background .12s;
}
.seg-centre:hover { background: #f4f8fd; box-shadow: 0 1px 6px rgba(0,0,0,.08); }
.seg-centre.seg-historic { border-left-color: #9aa4ae; opacity: .9; }
.seg-centre-nom { font-weight: 700; font-size: 15px; }
.seg-centre-sub { font-size: 13px; color: #5b6672; margin-top: 1px; }
.seg-centre-dates { font-size: 13px; color: #5b6672; margin-top: 6px; }
.seg-centre-pend { margin-top: 8px; font-size: 13px; font-weight: 700; color: #c0392b; }
.seg-centre-ok { margin-top: 8px; font-size: 13px; font-weight: 700; color: #1e874b; }
.seg-tornar { display: inline-block; margin-bottom: 8px; font-size: 14px; color: #2f7ed8; text-decoration: none; }
.seg-tornar:hover { text-decoration: underline; }

/* Supervisió del seguiment al tauler: marcadors de fi de mes. */
.sup-marca { cursor: pointer; font-weight: 700; }
/* Dia amb tasques pendents: vermell clar (per distingir-lo del signat, en verd). */
.sup-pendent { background: #f4a6a6; color: #7d1a12; }
.sup-signat { background: #e9f7ee; color: #1e874b; }
.sup-festiu { color: #4a2200; }
/* Dia clicat: el mateix marc negre interior que .avui (no desplaça res i deixa
   veure el color del marcador de sota). Si el dia clicat és avui, coincideixen. */
.cal-day.sup-sel { box-shadow: inset 0 0 0 2px #000; font-weight: 700; }
.cal-swatch.sup-pendent { background: #f4a6a6; }
.cal-swatch.sup-signat { background: #e9f7ee; }
/* Detall d'un dia: els acords amb coses pendents, en 4 columnes (baixen de fila
   quan no hi caben). El títol ocupa tota l'amplada. */
.sup-detall { margin-top: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: start; }
.sup-detall-titol { grid-column: 1 / -1; font-weight: 700; margin-bottom: 0; color: #1f2933; }
.sup-item { border: 1px solid #d9dee3; border-radius: 6px; padding: 8px 12px; }
.sup-item-cap { margin-bottom: 4px; }
.sup-falta { color: #c0392b; font-size: 14px; }
.sup-falta.sup-ok { color: #1e874b; }
.sup-ok { color: #1e874b; font-size: 14px; }
.sup-item .btn-mini { margin-top: 6px; }
@media (max-width: 1000px) { .sup-detall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .sup-detall { grid-template-columns: 1fr; } }
/* Botó «Genera PDF» (gran) i les 3 caselles de festius, tot en una fila. */
.cal-cap { display: flex; justify-content: flex-start; align-items: center; gap: 20px; margin-bottom: 12px; }
.cal-cap .cal-opcions { margin-bottom: 0; }
/* Avís vermell del tutor/a d'entitat (ja és d'una altra entitat). */
.camp-error-tutor { color: #c0392b; font-weight: 600; font-size: 14px; margin: 6px 0 0; }
.cal-opcions { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 12px; }
/* Resum del calendari: dates a l'esquerra i dies a l'empresa a la seva dreta,
   tot a la mida de lletra per defecte. */
.cal-resum { display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap; margin-bottom: 12px; }
.cal-dates { font-size: 14px; color: #333; }
.cal-total { font-size: 14px; color: #333; }
/* «Hores planificades», al costat dels dies a l'entitat (les mateixes que a la
   pestanya «Període»). */
.cal-hores { font-size: 14px; color: #333; }
.cal-taula td.cal-clicable { cursor: pointer; }
.cal-taula td.cal-clicable:hover { outline: 2px solid #2f7ed8; outline-offset: -2px; }
.cal-mesos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1100px) { .cal-mesos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .cal-mesos { grid-template-columns: 1fr; } }
.cal-mes { border: 1px solid #dfe4e9; border-radius: 5px; overflow: hidden; }
.cal-mes-titol {
    display: flex; align-items: center; justify-content: space-between;
    background: #f5f6f8; border-bottom: 1px solid #dfe4e9;
    padding: 6px 10px; font-size: 14px; font-weight: 700; color: #4a5560;
}
.cal-taula { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal-taula th {
    font-size: 11px; font-weight: 600; color: #667;
    padding: 4px 0; text-align: center; border-bottom: 1px solid #eee;
}
.cal-taula td {
    height: 26px; text-align: center; font-size: 12px; color: #333;
    border: 1px solid #f0f0f0;
}
.cal-taula td.cal-empresa { color: #1f2d3d; font-weight: 600; }
/* Dia que s'ha tret de l'estada: n'hi ha prou amb el fons; el número es queda
   del color de sempre, perquè el vermell és només del cap de setmana.
   ⚠ El color el tria l'administració a «Colors» i el posa el JavaScript com a
   estil en línia (colorNoEntitat, a calendari.js); aquí només hi ha el de
   reserva, que és el mateix per defecte: blanc. */
.cal-taula td.cal-no-empresa { background: #fff; }
/* Dissabtes i diumenges: número sempre en vermell (es conserva encara que es
   cliquin) i fons blanc quan no s'hi va (l'!important mana sobre els altres estats). */
.cal-taula td.cal-cap-setmana { color: #d8232a !important; }
/* Festiu obligatori (Espanya/Catalunya): taronja, ben diferenciat. */
/* ⚠ Sense «cursor: help»: el ratolí amb l'interrogant feia pensar que el dia
   feia alguna cosa, i un festiu obligatori NO es pot clicar. Els dies que sí que
   es poden clicar ja porten el cursor de mà (.cal-clicable). */
.cal-taula td.cal-festiu { background: #ef8354; color: #4a2200; font-weight: 600; }
/* Festiu local: amber. ⚠ Com el festiu obligatori i el «no es va a l'entitat», el
   color el tria l'administració a «Colors»; aquest és només el de reserva. */
.cal-taula td.cal-festiu-local { background: #f6c445; color: #6b4e00; font-weight: 600; }

/* La llegenda s'alinea sota els mesos: la tira de calendaris comença després de
   la fletxa esquerra (34px) i el seu marge (10px), per això s'hi indenta 44px. */
/* ⚠ Les caselles de la llegenda van UNA AL COSTAT DE L'ALTRA (no una sota de
   l'altra), a TOTES les vistes que la fan servir: calendari de l'acord, seguiment
   i supervisió del tauler. Si no hi caben, salten de línia. Per això no hi ha
   `max-width`: limitar-la a 460px la tornava a trencar en columna. */
/* La caixa és el contenidor flexible: el títol ocupa tota una línia (flex-basis
   100%) i les caselles van seguides a sota. Així val per als TRES llocs que la
   pinten (calendari.js, seguiment.js i tauler-seguiment.js), que hi pengen el títol i
   les files directament, sense haver de tocar cap dels tres. */
.cal-llegenda {
    margin-top: 16px; margin-left: 44px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px;
}
.cal-llegenda-titol { flex: 0 0 100%; font-size: 14px; font-weight: 700; color: #444; margin-bottom: 2px; }
.cal-llegenda-fila { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.cal-swatch { width: 20px; height: 20px; border-radius: 3px; border: 1px solid #ccc; flex: 0 0 auto; }
/* El fons d'aquesta casella el posa el JavaScript (color configurat); la vora s'hi
   queda perquè, sent blanc per defecte, es vegi on és la casella. */
.cal-swatch.cal-swatch-no { background: #fff; border-color: #ccc; }
.cal-swatch.cal-swatch-festiu { background: #ef8354; border-color: #d9642e; }
.cal-swatch.cal-swatch-festiu-local { background: #f6c445; border-color: #d9a800; }

/* Ressaltat groc COMPARTIT (l'aplica window.ressaltaCanvi, assets/ressalta.js)
   quan un valor calculat o actualitzat sol canvia: la data de fi automàtica, les
   hores del cicle, el tipus d'acord… El mateix efecte a tot el projecte; si es
   canvia la durada, es canvia AQUÍ i canvia a tot arreu. */
@keyframes canviat {
    0%   { background: #fff6cc; }
    100% { background: transparent; }
}
.canviat { animation: canviat 4s ease-out; }
@media (prefers-reduced-motion: reduce) {
    .canviat { animation: none; }
}
.periode-avis { color: #d8232a; font-size: 13px; margin-top: 4px; }
.vac-dates.oculta { display: none; }
.btn-crear:disabled { background: #b7c6d6; cursor: not-allowed; }

/* ---------- Desplegables amb cercador (CCAE, població) ----------
   Caixa de text on TAMBÉ s'hi pot escriure, amb la llista a sota i un triangle
   a la dreta que l'obre i la tanca (com la fletxa d'un desplegable). */
.combo { position: relative; }
/* Embolcall de la caixa: dona el «relative» al triangle, que així s'ajusta a
   l'alçada de la caixa i no a la del camp sencer (que inclou l'etiqueta). */
.combo-camp { position: relative; }
.combo-camp input[type="text"] { padding-right: 32px; }
.combo-boto {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-left: 1px solid #d5dbe1;
    border-radius: 0 3px 3px 0;
    background: #f2f5f8;
    color: #5a6b7d;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}
.combo-boto:hover { background: #e8f1fc; color: #1f2d3d; }
.combo.obert .combo-boto { background: #e8f1fc; color: #1f2d3d; }
.combo-llista {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 260px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #bbb;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .15);
}
.combo.obert .combo-llista { display: block; }
/* Text de la llista a la mida normal dels camps (14 px), com la caixa de cerca
   de sobre: la capçalera de secció només es distingeix pel gruix i el fons. */
.combo-grup { padding: 6px 10px; font-size: 14px; font-weight: 700; color: #555; background: #f0f0f0; }
.combo-item { padding: 6px 10px; font-size: 14px; cursor: pointer; }
.combo-item:hover { background: #e8f1fc; }
/* L'opció on s'ha arribat amb les fletxes del teclat (combo-tecles.js): es marca
   IGUAL que la que hi ha sota el ratolí, que és la mateixa idea —«si tries ara,
   tries aquesta»— i no dues maneres de dir el mateix. */
.combo-item.marcat { background: #e8f1fc; }

/* ---------- Botó amb MENÚ (menu-boto.js) ----------
   Un botó normal que, en clicar-lo, obre una llista d'opcions a sota. El fa
   servir «Conveni» de la fitxa quan n'hi ha un de signat carregat: «No signat»
   (el document que genera l'aplicació) i «Signat» (el PDF que s'ha pujat).
   ⚠ La llista es pinta amb .combo-llista/.combo-item, les mateixes que els
   desplegables escrivibles: una sola manera de veure una llista d'opcions. */
.menu-boto { position: relative; display: inline-block; }
/* La fletxa, separada del text com al triangle dels combos. */
.menu-boto-fletxa { margin-left: 6px; font-size: 12px; line-height: 1; }
.menu-boto-llista {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    z-index: 30;
    min-width: 100%;
    white-space: nowrap;
    background: #fff;
    border: 1px solid #bbb;
    border-radius: 4px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .15);
}
.menu-boto.obert .menu-boto-llista { display: block; }
/* Les opcions són ENLLAÇOS: cal desfer el blau i el subratllat que porten de
   sèrie perquè es vegin com la resta d'opcions d'una llista. */
.menu-boto-llista .combo-item { display: block; color: #1f2d3d; text-decoration: none; }
.menu-boto-llista .combo-item:hover,
.menu-boto-llista .combo-item:focus { background: #e8f1fc; color: #1f2d3d; }

/* ---------- Peticions d'eliminació d'entitats ---------- */
.panel-ample { grid-column: 1 / -1; }              /* panell a tota l'amplada del tauler */
.alta-avis {
    background: #fff7e0;
    border: 1px solid #ecd9a0;
    color: #7a5c00;
    padding: 10px 14px;
    border-radius: 5px;
    margin-bottom: 14px;
    font-size: 14px;
}
.peticions-motius { white-space: pre-wrap; }
.resolucio {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 5px;
    margin-bottom: 8px;
    font-size: 14px;
}
.resolucio.ok { background: #e9f7ee; border: 1px solid #bfe3cc; }
.resolucio.ko { background: #fdeeee; border: 1px solid #eec7c7; }
/* Petició pendent (vista d'admin dins «Missatges nous»): to neutre. */
.resolucio.peticio { background: #eef2f7; border: 1px solid #d5dde5; }
.resolucio form { margin-left: auto; }
/* Grup de botons d'una petició (Accepta / Denega / Visualitza) a la dreta. */
.resolucio-accions { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.resolucio-accions form { margin-left: 0; }
.modal-motius-cos { white-space: pre-wrap; word-break: break-word; }

/* Files de grup (llistat de cicles agrupat per famílies, plegable). */
.taula-llista tr.fila-grup td {
    background: #eef2f6;
    font-weight: 700;
    color: #444;
    cursor: pointer;
}
.taula-llista tr.fila-grup:hover td { background: #e2e9f0; }
.taula-llista tr.fila-amagada { display: none; }
.grup-fletxa { display: inline-block; transition: transform .1s; }
.fila-grup.obert .grup-fletxa { transform: rotate(90deg); }
.taula-llista.no-ordenable thead th { cursor: default; }

/* Caselles amb l'etiqueta al costat («assigna'l al meu centre» a tutors.php,
   «Període de vacances» a acords.php…). El marge inferior els dona la mateixa
   separació que hi ha entre la resta d'elements dels formularis. */
.camp-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    margin: 6px 0 12px;
    cursor: pointer;
}
/* Casella deshabilitada (p. ex. festius locals sense selecció): en gris. */
.camp-check input:disabled ~ span,
.camp-check:has(input:disabled) { color: #aab3bc; cursor: default; }
/* Dins d'un període: la casella «calcula automàticament» va enganxada a la
   «Data d'inici» de sota. */
.periode > .camp-check { margin-bottom: 4px; }
/* Casella «Mostra només els meus acords», sota el cercador del llistat. */
.filtre-meus { font-size: 14px; margin: 4px 0 12px; }

/* Cicles assignats al tutor (config.php, només lectura). */
.cicles-assignats {
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cicles-assignats li {
    background: #f5f6f8;
    border: 1px solid #e0e4e8;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 14px;
}
/* ---------- Totals de la base de dades (tauler de l'administració) ----------
   D'ESQUERRA A DRETA i saltant de línia quan s'acaba l'amplada, en comptes d'una
   casella per línia: són xifres curtes i, apilades, deixaven mitja pantalla
   buida. Cada casella fa l'amplada del SEU text, i el títol de sobre
   (.ent-section) continua anant de punta a punta.
   ⚠ Aquí el <li> NO és la casella: és una COLUMNA sense fons ni vora amb el
     total a dalt i, sota, els seus subtotals. Les caselles són els <span> de
     dins, que reprenen l'aspecte de .cicles-assignats li. */
.cicles-assignats.totals-bd {
    display: grid;
    /* QUATRE columnes de la mateixa amplada, ocupant tota la pàgina. «minmax(0,
       1fr)» i no «1fr» a seques: sense el 0 una etiqueta llarga («Total de
       convenis pendents d'acceptar») eixamplaria la seva columna i les quatre
       deixarien de ser iguals. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    gap: 8px;
}
/* Si no hi caben quatre, se'n fan menys —mai caselles escanyades—, amb els
   MATEIXOS punts de tall que l'altre bloc de quatre columnes de l'aplicació
   (.cicles-4col): així tot el web es reorganitza a la vegada. */
@media (max-width: 1100px) { .cicles-assignats.totals-bd { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .cicles-assignats.totals-bd { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .cicles-assignats.totals-bd { grid-template-columns: 1fr; } }
.cicles-assignats.totals-bd > li {
    background: none;
    border: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cicles-assignats.totals-bd > li > span {
    background: #f5f6f8;
    border: 1px solid #e0e4e8;
    border-radius: 4px;
    padding: 8px 12px;
}
/* Els subtotals: sota la casella de la qual pengen i en un to més apagat. */
.cicles-assignats.totals-bd > li > span.totals-sub { color: #56616c; }
/* …excepte el que AVISA de feina pendent (els convenis pendents d'acceptar): amb
   una xifra més gran que zero va en vermell, perquè es vegi d'un cop d'ull. El
   mateix vermell que les hores que no arriben (.hores-ko): a l'aplicació hi ha
   UN vermell per a «aquesta xifra demana que hi facis alguna cosa». */
.cicles-assignats.totals-bd > li > span.totals-sub.totals-avis {
    color: #a3271c;
    border-color: #f0c9c4;
    background: #fdf2f1;
}
.btn-mini.verd { background: #2e9e5b; }
.btn-mini.verd:hover { background: #268a4e; }

/* Modal de motius (reutilitza .modal del login, però més gran i alineat a l'esquerra). */
.modal-gran { max-width: 520px; }
.modal-body.esquerra { text-align: left; }
/* Acceptar/denegar una petició: s'intercanvien les distàncies respecte de la
   resta de modals — més separació entre el títol («Estàs segur?») i el detall, i
   menys entre les línies del detall (Acord / Alumne/a / instrucció). */
#modal-denega .modal-title, #modal-accepta .modal-title { margin-bottom: 22px; }
#modal-denega .modal-text,  #modal-accepta .modal-text  { margin-bottom: 10px; }
.modal-motius {
    width: 100%;
    box-sizing: border-box;
    min-height: 110px;
    margin: 4px 0 16px;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font: inherit;
    font-size: 14px;
    resize: vertical;
}
/* Avís de sota la pregunta del comentari final del mes (qui el llegirà): text
   secundari, a la mida mínima de la interfície i alineat amb la pregunta. */
.seg-mes-avis { font-size: 14px; color: #5a6673; margin: 0 0 4px; }
/* ⚠ 16 px entre botons, la MATEIXA separació que .alta-actions: els botons d'una
   fila es miren igual siguin dins d'una finestra o dins d'un formulari. Abans
   n'hi havia 12 i quedaven més junts que a la resta de l'aplicació. */
.modal-accions { display: flex; gap: 16px; justify-content: flex-end; }
.btn-gris { background: #8a949e; }
.btn-gris:hover:enabled { background: #76808a; }

/* Pestanyes del formulari d'entitats (Entitat / Centre de treball). */
/* En una finestra estreta les pestanyes NO es poden perdre: la barra fa tantes
   files com calgui (flex-wrap) i totes queden sempre a la vista. */
.pestanyes { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid #2f7ed8; }
/* El marc blau envolta tot el contingut de la pestanya (sota, esquerra i dreta). */
.pest-contingut {
    border: 2px solid #2f7ed8;
    border-top: 0;
    border-radius: 0 0 5px 5px;
    padding: 16px 16px 18px;
    margin-bottom: 8px;
}
.pestanya {
    background: #f0f0f0;
    border: 1px solid #e2e2e2;
    border-bottom: 0;
    border-radius: 5px 5px 0 0;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    white-space: nowrap;   /* el nom d'una pestanya no es parteix mai per dins */
}
/* Finestra estreta: pestanyes més compactes perquè n'hi capiguen més per fila
   (la lletra es queda als 14px de mínim de la interfície). */
@media (max-width: 1100px) {
    .pestanya { padding: 7px 10px; }
}
.pestanya:hover { background: #e4e4e4; }
/* Pestanya DESHABILITADA: no hi ha res per ensenyar-hi (Seguiments sense cap
   seguiment, on les tres hi surten igualment per veure que la pantalla en té
   tres i que el que passa és que són buides). Lletra apagada, cursor normal i
   sense canvi de fons en passar-hi per sobre. */
.pestanya:disabled { color: #7b8794; cursor: default; }
.pestanya:disabled:hover { background: #f0f0f0; }
.pestanya.activa { background: #2f7ed8; border-color: #2f7ed8; color: #fff; }
/* Pestanya amb alguna cosa obligatòria pendent —un camp buit o un grup de caselles
   sense cap marcar (p. ex. els cicles formatius)—: lletra en vermell. Si a més és
   l'activa (fons blau), un vermell més clar perquè es llegeixi. */
.pestanya.pest-pendent { color: #c0392b; }
.pestanya.activa.pest-pendent { color: #ffd4ce; }
/* Pestanya que conté un camp marcat en vermell pel servidor (.camp-err): mateixa
   lletra vermella. Va en una classe A PART de .pest-pendent perquè aquella la
   posa i la treu botons-formulari.js a cada tecla, i esborraria aquesta marca. */
.pestanya.pest-err { color: #c0392b; }
.pestanya.activa.pest-err { color: #ffd4ce; }
.pest-panell.oculta { display: none; }
/* ⚠ ESTAT PREVI AL JAVASCRIPT. pestanyes.js amaga els panells que no toquen amb
   la classe .oculta, però és a baix de tot de la pàgina: a les pàgines grosses
   (Tutors i Coordinadors porten el catàleg sencer de centres al desplegable) el
   navegador ja ha pintat abans d'arribar-hi i es veien TOTS els camps de totes
   les pestanyes alhora, repartint-se després. Mentre el marc no duu
   .pest-llesta —que pestanyes.js li posa quan ja ha triat la pestanya— només es
   veu el primer panell. Va amb !important perquè hi ha regles molt específiques
   (.main:has(…) > … > .pest-panell:not(.oculta)) que, abans que el JS hi posi
   .oculta, farien visibles els altres panells. Un cop hi és .pest-llesta la
   regla deixa de casar i tot torna a funcionar com sempre. */
.pest-contingut:not(.pest-llesta) > .pest-panell:not(:first-child) { display: none !important; }
/* Missatges llegits del tauler: alçada màxima amb desplaçament, perquè la llista
   (que pot ser llarga) no empenyi avall el calendari de supervisió i es vegi tot
   el que hi ha a sota. */
.content-tauler .pest-panell[data-pest="llegits"] { max-height: 240px; overflow-y: auto; }
/* Botó «Esborra missatges» a dalt de la safata de llegits. */
.msg-esborra-form { margin-bottom: 10px; }

/* Pestanya «Dades acadèmiques» d'alumnat: centres i cicles en caselles. */
.acad-blocs { display: flex; gap: 40px; flex-wrap: wrap; }
.acad-bloc { flex: 1 1 300px; min-width: 0; }
.acad-titol { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: #44515c; }
.acad-ajuda { margin: 0 0 10px; font-size: 14px; color: #56616c; }
/* Quan l'ajuda va dins del títol del llistat, hi va a la mateixa línia. */
.llista-titol .acad-ajuda { display: inline; margin: 0 0 0 12px; font-weight: 400; }
.acad-opcio { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; color: #333; cursor: pointer; }
.acad-opcio input { width: 16px; height: 16px; flex: none; }
/* Els assignats per un altre usuari: es veuen, però no es toquen. */
.acad-bloquejat { color: #8a95a1; cursor: default; }
.acad-buit { font-size: 14px; color: #8a95a1; }

.alta-actions { margin-top: 8px; display: flex; align-items: center; gap: 16px; }
/* Botons propis d'una pestanya («Cerca», «Nou centre de treball», «Nou
   responsable»…): van enganxats als camps que tenen a sobre, a la separació
   mínima de la interfície. El marge gran de sobre és per als botons que van
   sota el marc (Crea / Modifica / Elimina). */
.pest-contingut .alta-actions { margin-top: 4px; }
/* …excepte els botons PRINCIPALS (Crea/Modifica/Elimina) d'un formulari de
   manteniment (.config-form), que van dins d'una pestanya però NO són botons
   d'acció propis de la pestanya: han de guardar la mateixa separació amb els
   camps que a la resta de formularis (Acords, Alumnat…), no la mínima de 4px. */
.pest-contingut .alta-form.config-form .alta-actions { margin-top: 8px; }
.btn-crear {
    background: #2f7ed8;
    color: #fff;
    border: 0;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;   /* els botons-enllaç (Cancel·la) no van subratllats */
    display: inline-block;
}
.btn-crear:hover { text-decoration: none; }
/* El canvi de color en passar-hi per sobre només s'aplica si el botó està habilitat. */
.btn-crear:hover:enabled { background: #2568b8; }
.btn-modificar { background: #2e9e5b; }
/* «Esborra/Elimina filtres»: blau (com els altres botons), no vermell. */
.btn-crear.cerca-neteja { background: #2f7ed8; }
.btn-crear.cerca-neteja:hover:enabled { background: #2568b8; }
/* Deshabilitat (la caixa de cerca és buida): ha de SEMBLAR-HO. Cal repetir-ho
   aquí perquè la regla del color blau va després de .btn-crear:disabled i, amb
   la mateixa especificitat, guanyaria ella. */
.btn-crear.cerca-neteja:disabled { background: #b7c6d6; cursor: not-allowed; }
.btn-modificar:hover:enabled { background: #268a4e; }
.btn-eliminar { background: #c0392b; }
.btn-eliminar:hover:enabled { background: #a93226; }
/* Desfinalitza (a la fitxa de l'acord): taronja, com la fletxa del llistat. */
.btn-crear.taronja { background: #e67e22; }
.btn-crear.taronja:hover:enabled { background: #d3691a; }
/* «Recupera» (Reset): zona d'arrossegar el fitxer .sql. */
/* ⚠ UNA sola zona d'arrossegar a tota l'aplicació: la còpia de seguretat de
   «Recupera» (.recupera-zona) i el conveni signat (.zona-fitxer) es veuen igual.
   Amb dues còpies, el dia que se'n retoqui una l'altra quedaria diferent. */
.recupera-zona, .zona-fitxer { display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; padding: 28px; margin: 8px 0 14px; border: 2px dashed #b7c6d6; border-radius: 8px;
    background: #f6f9fc; color: #55606b; cursor: pointer; text-align: center; }
.recupera-zona:hover, .recupera-zona.sobre,
.zona-fitxer:hover, .zona-fitxer.sobre { border-color: #2f7ed8; background: #eef4fb; }
.recupera-nom, .zona-fitxer-nom { font-weight: 700; color: #2a3f55; }
/* Dins d'una finestra, la zona guarda la MATEIXA distància amb els botons que la
   caixa de motius de la resta de finestres (.modal-motius): 4 px per sobre i 16
   per sota. Sense això la zona quedava enganxada als botons d'acció. */
.modal-body .zona-fitxer { margin: 4px 0 16px; }
/* «Recupera» (Reset): llista de les còpies desades a database/, per triar-ne una.
   L'enllaç de baixada va a la dreta de tot, fora de l'etiqueta del rodonet. */
/* ⚠ La llista ensenya TOTS els .sql de la carpeta i pot ser llarga: es queda amb
   l'alçada d'unes 8 files i, a partir d'aquí, es desplaça amb la seva barra
   vertical (en comptes d'estirar la pàgina avall). L'«overflow: hidden» d'abans
   només hi era per arrodonir els cantons de la primera i l'última fila; amb
   «auto» els cantons continuen arrodonits i, a més, hi surt la barra quan cal. */
.copies-llista { list-style: none; margin: 8px 0 14px; padding: 0;
    border: 1px solid #dbe3ec; border-radius: 8px;
    max-height: 320px; overflow-y: auto; overflow-x: hidden; }
.copia-fila { display: flex; align-items: center; gap: 12px; padding: 8px 12px;
    border-top: 1px solid #eef2f7; }
.copia-fila:first-child { border-top: 0; }
.copia-fila:hover { background: #f6f9fc; }
.copia-tria { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer; }
.copia-nom { font-weight: 700; color: #2a3f55; overflow-wrap: anywhere; }
.copia-dades { margin-left: auto; color: #55606b; white-space: nowrap; }
.copia-baixa { color: #2f7ed8; text-decoration: none; white-space: nowrap; }
.copia-baixa:hover { text-decoration: underline; }
/* «Elimina» el fitxer de la carpeta: és un botó del formulari, però es veu igual
   que l'enllaç de baixar (text sol) perquè la fila no s'ompli de botons. En
   vermell, que és el color de les accions que esborren a tot el projecte. */
.copia-esborra { background: none; border: 0; padding: 0; font: inherit;
    color: #c0392b; white-space: nowrap; cursor: pointer; }
.copia-esborra:hover { text-decoration: underline; }
/* Comptador del total de registres (només admin) sobre els llistats. */
/* Compte del llistat (X … en total / en curs / finalitzats): mida normal i SENSE
   negreta. Va sota els filtres (o el títol) i damunt del llistat, amb 12px de
   separació —la mínima de la interfície— a dalt i a baix perquè no s'enganxi ni al
   que té a sobre ni al llistat. */
.llista-compte { margin: 12px 0; font-weight: 400; color: #2a3f55; }
/* El compte ja posa el coixí de 12px a sota; als llistats amb pestanyes la taula
   que el segueix NO hi ha d'afegir el seu margin-top, o es doblaria a 24px. Cal més
   especificitat que la regla general de .taula-scroll perquè hi guanyi. */
.llista-wrap .pest-panell > .llista-compte + .taula-scroll,
.llista-wrap > .llista-compte + .taula-scroll { margin-top: 0; }
.btn-cercar { background: #2f7ed8; }
.btn-cercar:hover:enabled { background: #2868b3; }

/* Botons petits dins de taules (centres de treball d'una entitat). */
.form-inline { display: inline; }
.btn-mini {
    border: 0;
    background: #2f7ed8;
    color: #fff;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 12px;
    line-height: 1.3;
    cursor: pointer;
    text-decoration: none;   /* els botons-enllaç (👁, 📄) no van subratllats */
    display: inline-block;
}
.cel-accions .btn-mini { font-size: 15px; }
/* Als llistats d'acords, alumnes i entitats les accions són NOMÉS icones
   (✏️ 📅 📄 🗑️ 🏁): totes la mateixa mida (una caixa fixa amb l'emoji centrat).
   ⚠ L'amplada és la MÍNIMA que deixa cabre la icona més ampla, ni un píxel més:
   22px, que és el que fan .ico-bandera i .ico-dalla (els emoji es queden entre
   17,5 i 20,6px a 15px de lletra). Si algun dia s'eixampla una icona, aquest
   número l'ha de seguir. */
.taula-principal .cel-accions .btn-mini {
    width: 22px; height: 26px; padding: 0;
    font-size: 15px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    vertical-align: middle;
}
/* Excepció: els pocs botons de la cel·la que porten TEXT i no icona (avui només
   «↩ Desfinalitza») s'ajusten al seu contingut; amb la caixa de 22px es tallarien. */
.taula-principal .cel-accions .btn-mini.btn-amb-text {
    width: auto; padding: 0 8px;
}
/* Bandera de quadres (Finalitza): icona EMOJI (🏁, clau btn.bandera_ico), no un
   SVG. Com que és text i no una caixa, es mesura amb font-size —no amb width/
   height— i es centra a la mateixa casella que la resta d'icones. */
.ico-bandera {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 18px; font-size: 15px; line-height: 1; font-style: normal;
}
/* Dalla (Tanca el seguiment): fulla corba i mànec, a la mida de la bandera. */
.ico-dalla { width: 22px; height: 18px; display: block; }
/* Dos documents, un davant de l'altre (Duplica). */
.ico-duplica { width: 18px; height: 18px; display: block; }
/* Dins dels botons grans (formulari d'edició) les icones van EN LÍNIA amb el
   text, no com a bloc: bandera de «Finalitza» i documents de «Duplica». */
.btn-crear .ico-duplica, .btn-crear .ico-dalla {
    display: inline-block; vertical-align: -3px; margin-right: 5px; width: 18px; height: 16px;
}
/* La bandera és un emoji: en línia amb el text del botó, sense fer-lo més alt.
   ⚠ CENTRADA amb el text (vertical-align: middle), no penjada per sota: amb el
   «-3px» d'abans la bandera de «Finalitza el seguiment» quedava més baixa que el
   text del botó. */
.btn-crear .ico-bandera {
    display: inline-flex; vertical-align: middle; margin-right: 5px; width: 18px; height: 16px;
}
/* Finalitzar SEGUIMENT: la mateixa bandera del llistat d'acords (.ico-bandera).
   L'estat «finalitzat» hi afegeix un ✓ verd. */
.fi-form { display: inline; margin: 0; padding: 0; }
.fi-estat { display: inline-flex; align-items: center; justify-content: center;
            width: 40px; height: 26px; vertical-align: middle; }
.fi-ok { color: #1e874b; font-weight: 700; font-size: 11px; margin-left: -1px; }
/* Files més compactes (menys separació vertical) en aquests llistats: TOTS han de
   tenir exactament la mateixa alçada de fila. */
/* Files de TOTS els llistats principals a la MATEIXA alçada (31px): el coixí de
   2px i una alçada mínima de cel·la de 26px —la dels botons d'acció—, perquè els
   llistats que no en tenen (festius…) no facin les files més baixes. */
.taula-llista.taula-principal td { padding: 2px 12px; height: 31px; }
.btn-mini:hover { background: #2868b3; }
.btn-mini.vermell { background: #c0392b; }
.btn-mini.vermell:hover { background: #a93226; }
/* Finalitza: indi, per distingir-lo del blau de «Visualitza». */
.btn-mini.blau { background: #5a4fcf; }
.btn-mini.blau:hover { background: #4a3fb5; }
/* Botó del document de l'acord: groc, amb text fosc per contrast. */
.btn-mini.groc { background: #e0a500; color: #2a2100; }
.btn-mini.groc:hover { background: #c8930a; }
/* Desfinalitza: taronja. */
.btn-mini.taronja { background: #e67e22; }
.btn-mini.taronja:hover { background: #d3691a; }
/* Pendent: gris i sense clic (petició d'esborrat ja enviada). */
.btn-mini.gris, .btn-mini:disabled { background: #9aa4ae; cursor: default; }
.btn-mini.gris:hover, .btn-mini:disabled:hover { background: #9aa4ae; }
/* Tutor/a d'entitat que ja consta en un altre acord del grup: queda marcat i no
   es pot desmarcar (a la pestanya «Tutor/a» de l'alta). */
/* Només el span directe (el del nom), no el ★ niat a dins: si no, surten dos
   cadenats quan el tutor/a bloquejat és, a més, el preferit. */
.picker-item.tutor-bloquejat > span::after { content: " 🔒"; font-size: 12px; }
.picker-item.tutor-bloquejat input { cursor: not-allowed; }
.btn-mini-elimina { background: #c0392b; }
.btn-mini-elimina:hover { background: #a93226; }
/* Cel·la d'accions del llistat: Modifica + Elimina un al costat de l'altre. */
.cel-accions { white-space: nowrap; }
/* Llistat d'acords: amplada segons el contingut (table-layout: auto). Les
   columnes «estretes» (codi, estudi, tipus, tutor de centre, alta, accions) no
   salten de línia i s'ajusten al seu contingut (width:1px = mínim, el nowrap les
   eixampla just el que cal). Només Alumne, Entitat i Centre de treball
   (.col-ampla) es reparteixen l'espai que sobra i, si cal, salten de línia. */
/* Mateixa idea per als llistats d'alumnes i entitats: cada columna s'ajusta al
   contingut i només la marcada amb .col-ampla (Cognoms/Nom, o Nom a entitats)
   creix fins a ocupar l'espai que sobra. */
/* Per CLASSE i no per id: així val per a tots els llistats principals, també per
   als que van a una segona pestanya (p. ex. el d'acords finalitzats). ⚠ Cal la
   doble classe (.taula-llista.taula-principal): les regles genèriques de
   .taula-llista són MÉS AVALL al fitxer i, amb la mateixa especificitat,
   guanyarien (table-layout: fixed, coixí de les cel·les…). */
.taula-llista.taula-principal { table-layout: auto; }
.taula-llista.taula-principal th:not(.col-ampla),
.taula-llista.taula-principal td:not(.col-ampla) { white-space: nowrap; width: 1px; }
.taula-llista.taula-principal th.col-ampla,
.taula-llista.taula-principal td.col-ampla { white-space: normal; }
/* Separació entre accions: la posa SEMPRE l'element de primer nivell de la
   cel·la, sigui un botó solt o el <form> que n'embolcalla un (Finalitza, Tanca,
   Desfinalitza). ⚠ El botó de DINS del form no hi ha de posar cap marge: si no,
   se'n sumarien dos i, sobretot, la regla de l'últim element —que mira els fills
   directes— no arribava al botó i deixava 6px morts a la dreta. */
.cel-accions .btn-mini, .cel-accions .form-inline, .cel-accions .fi-form { margin-right: 6px; }
.cel-accions .form-inline .btn-mini, .cel-accions .fi-form .btn-mini { margin-right: 0; }
.cel-accions .form-inline, .cel-accions .fi-form { display: inline-flex; vertical-align: middle; }
.cel-accions > :last-child { margin-right: 0; }
.ct-principal { color: #b8860b; font-weight: 700; font-size: 13px; white-space: nowrap; }

/* Enllaç amb aspecte de botó (p. ex. «Nou centre de treball»). */
a.btn-enllac { text-decoration: none; display: inline-block; }
/* «Nou…» té la MATEIXA mida que la resta de botons d'acció (com «Modifica»),
   en gris per distingir-lo de l'acció principal. */
.btn-nou {
    background: #8a949e; color: #fff; border: 0; border-radius: 5px;
    padding: 10px 20px; font-size: 15px; font-weight: 600;
    text-decoration: none; cursor: pointer; display: inline-block;
}
.btn-nou:hover { background: #76808a; text-decoration: none; }

/* ---------- Llistat ordenable ---------- */
.llista-wrap { margin-top: 0; }
/* El títol del llistat: més separació a sobre (respecte dels botons/marc) que a
   sota (queda enganxat a la seva taula). */
.llista-titol { font-size: 16px; font-weight: 700; color: #44515c; margin-top: 18px; margin-bottom: 6px; }
.llista-buida { color: #8a95a1; font-size: 14px; }
/* Peu dels llistats que es carreguen a trossos en baixar (centres): diu que
   n'estan arribant més i desapareix quan ja hi són tots. */
.llista-mes { color: #8a95a1; font-size: 14px; padding: 8px 4px; }
/* Caixa de cerca ràpida del llistat (dins la pestanya «Cerca bàsica»): mateixa
   alçada i lletra que els camps del formulari (mides mínimes de la interfície). */
.cerca-llista {
    width: 100%;
    max-width: 460px;
    box-sizing: border-box;
    border: 1px solid #b9c2cc;
    border-radius: 3px;
    padding: 8px 10px;
    font-size: 14px;
    font-family: inherit;
    color: #1f2d3d;
    background: #fff;
}
.cerca-llista:focus { outline: 0; border-color: #2f7ed8; box-shadow: 0 0 0 2px rgba(47,126,216,.2); }
/* Filtres del llistat en una MATEIXA línia (la caixa de cerca i els desplegables):
   així no costen cap fila de llistat. Si la finestra és estreta, salten de línia. */
.llista-filtres { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.llista-filtres .cerca-llista { flex: 1 1 220px; width: auto; }
.llista-filtres label { font-size: 14px; color: #1f2d3d; }
/* Desplegable de filtre: mateixa alçada i lletra que la caixa de cerca. */
.filtre-llista {
    border: 1px solid #b9c2cc;
    border-radius: 3px;
    padding: 8px 10px;
    font-size: 14px;
    font-family: inherit;
    color: #1f2d3d;
    background: #fff;
}
.filtre-llista:focus { outline: 0; border-color: #2f7ed8; box-shadow: 0 0 0 2px rgba(47,126,216,.2); }
.filtre-llista:disabled { background: #eef1f4; color: #8a95a1; cursor: not-allowed; }
/* Sense barra de desplaçament horitzontal: si la finestra es fa petita,
   el contingut de les cel·les simplement es retalla (…). */
/* TOTS els llistats són responsive: si les columnes no hi caben, es desplaça el
   LLISTAT (no la pàgina) a esquerra i dreta. El min-width evita que les columnes
   s'escanyin fins a no poder-se llegir: a partir d'aquí, desplaçament. Les taules
   de dins d'una entitat (.taula-4files) tenen poques columnes i en demanen menys. */
.taula-scroll { overflow-x: auto; }
.taula-scroll > .taula-llista { min-width: 620px; }
.taula-scroll.taula-4files > .taula-llista { min-width: 380px; }
/* TOTS els llistats fan la MATEIXA mida: una caixa d'alçada fixa (capçalera + 12
   files) amb el seu propi desplaçament vertical, tinguin 3 files o 300. Així la
   pàgina no canvia d'alçada d'un llistat a un altre. El càlcul és el mateix que
   el de .taula-4files: capçalera 36px + 35px per fila. */
/* La caixa arriba fins al final del llistat i, si hi ha més files de les que hi
   caben, fins a baix de tot de la pàgina (i es desplaça per dins). Ho fa la
   cadena de flex de sota: .main → .alta-wrap → .llista-wrap → .pest-contingut. */
/* El topall és RELATIU A LA FINESTRA (no un nombre fix de files): així, en un
   navegador sense :has() —que és qui aplica les regles de sota—, el llistat
   segueix aprofitant tota l'alçada que hi ha, no només 12 files. */
.taula-scroll { flex: 1; min-height: 0; max-height: calc(100vh - 190px); overflow-y: auto; }
/* Pàgines de LLISTAT: el marc blau de les pestanyes s'estira fins a baix, però MAI
   més enllà de l'alçada de la finestra: la pàgina no es desplaça (la barra vertical
   va SEMPRE per dins del llistat, mai fora de la pestanya). Val tant si el llistat
   penja de .alta-wrap (alumnat, entitats, acords…) com si va DINS del panell d'una
   pestanya (acords, seguiments, manteniments, dies festius) — per això la condició
   del :has() és per descendent, no per fill directe. S'exclouen les taules de dins
   d'una entitat (.taula-4files), que no són el llistat de la pàgina. */
.main:has(.llista-wrap .taula-scroll:not(.taula-4files)) { height: 100vh; overflow: hidden; }
/* …i la pàgina sencera tampoc no es desplaça: si el menú lateral és més alt que la
   finestra, es desplaça ELL per dins, no la pàgina (així no surt mai una barra
   vertical fora de la pestanya). */
.layout:has(.main .llista-wrap .taula-scroll:not(.taula-4files)) { height: 100vh; min-height: 0; overflow: hidden; }
.layout:has(.main .llista-wrap .taula-scroll:not(.taula-4files)) > .sidebar { min-height: 0; overflow-y: auto; }
.main:has(.llista-wrap .taula-scroll:not(.taula-4files)) > .alta-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.main:has(.llista-wrap .taula-scroll:not(.taula-4files)) > .alta-wrap > .llista-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* Manteniments: el marc de la pestanya i el seu panell també s'estiren, i el
   llistat de dins es queda amb l'espai que sobra. */
.main:has(.llista-wrap .taula-scroll:not(.taula-4files)) > .alta-wrap > .pest-contingut { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.main:has(.llista-wrap .taula-scroll:not(.taula-4files)) > .alta-wrap > .pest-contingut > .pest-panell:not(.oculta) { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.main:has(.llista-wrap .taula-scroll:not(.taula-4files)) .pest-panell > .llista-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.main:has(.llista-wrap .taula-scroll:not(.taula-4files)) .llista-wrap > .taula-scroll:not(.taula-4files) { flex: 0 1 auto; max-height: none; }
/* Excepció «Dies festius»: aquí el llistat SÍ que ha d'omplir tot l'espai que li
   queda i desplaçar-se per dins (no s'atura a la mida del contingut). Va després
   de la regla de sobre, i amb la mateixa força, perquè hi guanyi. */
.main:has(.main-festius .taula-scroll) .main-festius .llista-wrap > .taula-scroll:not(.taula-4files) { flex: 1 1 auto; max-height: none; }
/* El marc de les pestanyes creix amb la finestra (en temps real), però MAI més
   del que ocupa el llistat: amb poques files el marc s'acaba al final del
   llistat, i amb moltes s'atura a baix de la pàgina i el llistat es desplaça per
   dins. Ho fa `flex: 0 1 auto` (mida del contingut, però es pot encongir). */
/* Si dins del marc hi ha un LLISTAT, el marc s'estira tant com pot perquè s'hi
   vegin el màxim de files (i el llistat es desplaça per dins). Els marcs que
   només tenen camps segueixen fent l'alçada del seu contingut. */
.main:has(> .alta-wrap > .llista-wrap) .llista-wrap > .pest-contingut { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.main:has(> .alta-wrap > .llista-wrap) .llista-wrap > .pest-contingut > .taula-scroll { flex: 1 1 auto; max-height: none; }
/* Separació entre els botons/filtres de la pestanya i la taula: no han d'anar
   enganxats (mides mínimes de la interfície). */
.llista-wrap > .pest-contingut > .taula-scroll,
.llista-wrap .pest-panell > .taula-scroll { margin-top: 12px; }
/* …i quan el llistat va dins del panell de la pestanya (acords, seguiments). */
.main:has(> .alta-wrap > .llista-wrap) .llista-wrap > .pest-contingut > .pest-panell:not(.oculta) {
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
}
/* …però un panell que NOMÉS té els filtres (el llistat li va a fora, a sota) no
   s'ha d'encongir mai: si s'encongeix, el botó «Esborra filtres» surt de la seva
   caixa i acaba enganxat a la taula (o a sobre). Només s'encongeix el panell que
   duu el llistat a dins. */
.main:has(> .alta-wrap > .llista-wrap) .llista-wrap > .pest-contingut > .pest-panell:not(.oculta):not(:has(.taula-scroll)) {
    flex: 0 0 auto;
}
.main:has(> .alta-wrap > .llista-wrap) .llista-wrap .pest-panell > .taula-scroll { flex: 1 1 auto; max-height: none; }
/* En desplaçar-se, la capçalera es queda enganxada a dalt (si no, no se sabria
   quina columna és cada cosa). */
.taula-scroll thead th { position: sticky; top: 0; z-index: 1; }

/* ---------- Llistat limitat a 4 files (els de dins d'una entitat: centres de
   treball, responsables i tutors/es) ----------
   L'alçada surt del compte de sota, i per això les files han de mesurar sempre
   el mateix: el line-height va escrit (i no deixat al navegador) perquè el
   càlcul quadri i no es vegi mitja cinquena fila.
     capçalera = 9 + 9 de coixí + 18 de línia            = 36 px
     fila      = 8 + 8 de coixí + 18 de línia + 1 de vora = 35 px          */
.taula-llista thead th { line-height: 18px; }
.taula-llista td       { line-height: 18px; }
/* Excepció: les taules de dins d'una entitat, que van dins d'una pestanya i
   només ensenyen 4 files (aquí sí que la caixa s'ajusta al que hi ha). */
.taula-scroll.taula-4files {
    height: auto;
    max-height: calc(36px + 4 * 35px);
    overflow-y: auto;
}
/* La capçalera es queda enganxada a dalt: si no, en baixar es perdria de vista
   i ja no se sabria quina columna és cada cosa (ni s'hi podria clicar per ordenar). */
.taula-scroll.taula-4files thead th { position: sticky; top: 0; z-index: 1; }
.taula-llista {
    width: 100%;
    table-layout: fixed;   /* totes les columnes amb la mateixa amplada */
    border-collapse: collapse;
    font-size: 13.5px;
    background: #fff;
}
.taula-llista thead th {
    background: #4a4a4a;
    color: #fff;
    text-align: left;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    user-select: none;
}
.taula-llista thead th:hover { background: #3a3a3a; }
/* Capçaleres que ordenen amb un enllaç (festius.php, que ordena al servidor):
   han de semblar les de la resta de llistats, no un enllaç blau subratllat. */
.taula-llista thead th a,
.taula-llista thead th a:hover,
.taula-llista thead th a:visited { color: inherit; text-decoration: none; }
.taula-llista thead th.asc::after  { content: " \25B2"; font-size: 10px; }
.taula-llista thead th.desc::after { content: " \25BC"; font-size: 10px; }
.taula-llista td {
    padding: 8px 12px;
    border-bottom: 1px solid #e8ebee;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Centrat vertical: és el PREDETERMINAT de qualsevol llistat. Així el «Sí»
       (preferit), els botons i el text queden a la mateixa alçada a totes les
       taules, independentment de les columnes. No s'ha de sobreescriure per a
       una taula concreta; si cal, només per a un estat puntual d'una fila. */
    vertical-align: middle;
}
.taula-llista tbody tr { cursor: pointer; }
/* Files alternades: una blanca i una altra una mica grisa, a totes les llistes. */
.taula-llista tbody tr:nth-child(odd)  { background: #fff; }
.taula-llista tbody tr:nth-child(even) { background: var(--llista-gris, #dfe3e8); }
/* Fila seleccionada i fila amb el ratolí a sobre: el mateix color (configurable). */
.taula-llista tbody tr:hover { background: var(--llista-sel, #d7e9fb); }
.taula-llista tbody tr.sel { background: var(--llista-sel, #d7e9fb); }
/* Reordenació per arrossegament (p. ex. valoracions): la nansa i l'estat mentre
   s'arrossega una fila. */
.col-drag { text-align: center; color: #98a2ac; cursor: grab; user-select: none;
    touch-action: none; }
/* Amplada pròpia de la columna de la nansa. Les taules són table-layout:fixed amb
   overflow:hidden a les cel·les, així que sense aquesta amplada (abans width:1%) la
   nansa quedava tallada per la meitat i només se'n veia una columna de punts. */
.taula-llista .col-drag { width: 34px; padding-left: 10px; padding-right: 10px; }
.col-drag:active { cursor: grabbing; }
/* CCAE: la nansa i el codi comparteixen cel·la, així el codi queda sempre a la
   mateixa distància dels punts (--nansa-sep) sigui quin sigui el nivell. Tota la
   cel·la s'indenta segons el nivell (1..3). */
#taula-ccae .col-ccae { width: 190px; text-align: left; }
/* Cicles formatius: la columna del codi, a l'amplada del codi (com als CCAE),
   no la meitat de la taula. La nansa i la indentació funcionen igual. */
#taula-cicles .col-ccae { width: 190px; text-align: left; }
/* Les dues columnes d'hores: amplada pròpia (amb `table-layout: fixed`, una
   columna a l'1% es quedaria sense res i el text no es veuria). */
#taula-cicles .col-hores { width: 130px; }
#taula-cicles .col-ccae .nansa { margin-right: var(--nansa-sep); cursor: grab; color: #98a2ac;
    user-select: none; touch-action: none; }
#taula-cicles .col-ccae .nansa:hover { color: #5a6673; }
#taula-cicles .col-ccae .nansa:active { cursor: grabbing; }
#taula-ccae .col-ccae .nansa { margin-right: var(--nansa-sep); cursor: grab; color: #98a2ac;
    user-select: none; touch-action: none; }
#taula-ccae .col-ccae .nansa:hover { color: #5a6673; }
#taula-ccae .col-ccae .nansa:active { cursor: grabbing; }
/* Nansa d'arrossegament: els 6 punts de sempre (caràcter ⠿), iguals a totes les
   llistes reordenables. */
.nansa { display: inline-block; font-size: 16px; line-height: 1; vertical-align: middle; }
.col-drag:hover .nansa { color: #5a6673; }
.taula-llista tbody tr.arrossegant { opacity: .45; }

/* =====================================================================
   RESPONSIVE — menú lateral plegable des del botó ☰
   ===================================================================== */
@media (max-width: 900px) {
    /* Les dues COLUMNES de la graella passen a ser dues FILES: la barra a dalt
       (només l'alçada del ☰) i el contingut a sota, que es queda TOTA la resta
       de l'alçada de la finestra. Cal repetir el selector amb :has() dels
       llistats perquè aquell (més avall al fitxer, i més específic) no torni a
       imposar la graella de dues columnes ni una alçada de 100vh a .main —era
       això el que deixava el contingut escapçat per sota de la franja. */
    .layout,
    .layout:has(.main .llista-wrap .taula-scroll:not(.taula-4files)) {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        height: 100vh;
        min-height: 0;
        overflow: hidden;
    }
    .content { grid-template-columns: 1fr; }

    /* La barra lateral es redueix a una franja superior amb només el ☰.
       El menú (usuari + enllaços) queda amagat fins que es prem el ☰: llavors
       es desplega per damunt del contingut (overlay), sense empènyer-lo.
       ⚠ overflow: visible — amb el `overflow-y: auto` de la barra ampla, el
       desplegable (posicionat a sota de la franja) quedava RETALLAT i el menú
       no es veia enlloc. */
    .sidebar,
    .layout:has(.main .llista-wrap .taula-scroll:not(.taula-4files)) > .sidebar {
        flex: 0 0 auto;
        position: relative;
        z-index: 50;
        border-right: 0;
        border-bottom: 1px solid #d9dee3;
        overflow: visible;
    }
    /* El contingut ocupa l'espai que queda i es desplaça per dins (mai la finestra). */
    .main,
    .main:has(.llista-wrap .taula-scroll:not(.taula-4files)) {
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
    }
    .main-festius { height: auto; }
    /* En pantalla petita el rail estret no s'aplica. */
    .layout.nav-plegat { grid-template-columns: none; }

    .side-panel { display: none; }

    /* Menú obert amb el ☰ (.nav-obert): cau per damunt del contingut. */
    .layout.nav-obert .side-panel {
        display: flex;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #2b2b2b;
        box-shadow: 0 12px 24px rgba(0, 0, 0, .3);
        max-height: calc(100vh - 64px);
        overflow-y: auto;
    }
    /* En pantalla estreta, en desplegar un apartat (clic al pare) el seu submenú
       («Nou» / «Llistat») ha de sortir perquè l'usuari hi pugui clicar. */
    .layout.nav-obert .menu-grup.obert .submenu { display: flex; }
    .layout.nav-obert .side-userbox { align-items: stretch; padding: 12px 14px; }
    .layout.nav-obert .menu-item { justify-content: flex-start; gap: 12px; padding: 12px 16px; }

    /* Formularis d'alta a una sola columna */
    .alta-grid { grid-template-columns: 1fr; }
    .alta-row { grid-template-columns: 1fr; }
    .field { grid-template-columns: 1fr; gap: 4px; }
    .field > label { text-align: left; }
}

/* =====================================================================
   PDF DEL CALENDARI D'UN ACORD (acords_pdf.php)
   Pàgina preparada per a impressió → desar com a PDF. 15 mesos per pàgina
   (graella 3×5); si l'acord en té més, un salt força una 2a pàgina.
   ===================================================================== */
/* ═══ MARGES DE TOTS ELS PDF DE L'APLICACIÓ: 15mm als costats, 12mm dalt i baix ═══
   ⚠ REGLA FIXA, ara i per als PDF que es facin d'aquí endavant: «margin: 12mm 15mm»
   i prou. D'aquí en surt la posició del logotip —15mm de l'esquerra, 12mm de
   dalt—, que ha de ser EXACTAMENT la mateixa a tots els documents. El mateix
   @page hi ha a l'acord (AcordsDocController), al conveni (Views/convenis/pdf.php)
   i a la qualificació (SeguimentQualifController); si mai es canvia, es canvia
   als quatre alhora.
   ⚠ I els marges van al @page, NO com a padding del contenidor: un padding només
   fa marge al PRINCIPI i al FINAL del bloc —a dalt de la 1a pàgina i a baix de
   l'última—, i les pàgines del mig quedaven amb el contingut enganxat a la vora.

   ⚠⚠ EL «!important» NO ÉS DECORATIU: SENSE ELL, A LA WEB NO HI HA MARGES.
   A la web els PDF els fa Dompdf, i el Dompdf aplica el @page al marc ARREL del
   document — que és el mateix que casa amb el selector universal. El reset del
   principi d'aquest fitxer, «* { … margin: 0 … }» (línia 2), li guanya i deixa el
   @page en «margin: 0 0 0 0»: el calendari sortia amb el logotip tocant la vora
   del full i el contingut sense cap marge, mentre que en local (Chrome, que tracta
   el @page com el que és, una caixa de pàgina) sortia bé. És l'únic dels quatre
   documents que incrusta styles.css sencer, i per això era l'únic que ho patia.
   Comprovat: amb el reset, Dompdf calcula 0/0; amb el «!important», 12mm/15mm.
   I a Chrome el PDF surt BYTE A BYTE IGUAL amb «!important» i sense.
   Els altres tres documents el porten igualment, perquè el @page ha de ser el
   mateix a tot arreu i perquè el dia que un d'ells hereti un reset «*» no torni
   a passar. NO el treguis. */
@page { size: A4 portrait; margin: 12mm 15mm !important; }
.pdf-body {
    background: #fff; color: #000;
    font-family: "Times New Roman", Times, serif; margin: 0; padding: 0;
}
.pdf-full { padding: 0; }
.pdf-body .pdf-barra { padding: 12px 12px 0; }
.pdf-barra { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.pdf-barra button, .pdf-barra a {
    font-size: 14px; padding: 6px 12px; border: 0; border-radius: 4px;
    background: #2f7ed8; color: #fff; text-decoration: none; cursor: pointer;
}
.pdf-barra a { background: #6b757e; }
/* Capçalera IDÈNTICA a la del PDF d'acord: logo a l'esquerra, «REF55/Calendari» a la
   dreta i una línia (2px) sota tota la capçalera, tot als mateixos valors. */
/* Logo a l'esquerra (flux normal) i el bloc de la dreta (REF) amb position:absolute,
   NO amb flexbox: el Dompdf del servidor no fa flex i el logo/REF quedaven mal
   col·locats. Aquest patró (el mateix que el PDF d'acord) el fan bé els dos motors. */
.pdf-capcalera { position: relative; border-bottom: 2px solid #000; padding-bottom: 6px; margin-bottom: 10px; }
.pdf-cap-dreta { position: absolute; top: 0; right: 0; text-align: right; }
.pdf-ref { font-size: 15px; font-weight: 700; color: #000; }
/* Logotip a dalt a l'esquerra, mateixa mida i lloc que al PDF d'acord (42px). */
.pdf-logo { display: block; height: 42px; width: auto; }
/* Previsualització del logo a la pàgina d'admin. */
.logo-actual { display: flex; align-items: center; gap: 16px; margin: 10px 0 18px; flex-wrap: wrap; }
.logo-actual img { max-height: 80px; max-width: 320px; border: 1px solid #ddd; border-radius: 4px; padding: 6px; background: #fff; }
/* «Tria arxiu»: l'input de fitxer va amagat i s'hi clica amb un botó normal. */
.field.camp-fitxer { display: flex; flex-direction: row; align-items: center; gap: 16px; flex-wrap: wrap; }
/* «Valors»: iframes que encasten les pàgines de manteniment; s'ajusten en alçada
   per JS. Amplada completa i sense vora. */
.valors-iframe { width: 100%; border: 0; display: block; min-height: 320px; background: #fff; }
/* Dins «Valors» (embed) la barra de pestanya ÚNICA de cada secció és redundant (ja la
   nomena la pestanya de «Valors»): s'amaga. Les de diverses pestanyes (p. ex.
   Valoracions, o Dades bàsiques/Extres) es mantenen tal qual. */
.embed-body .pestanyes:has(> .pestanya:only-child) { display: none; }
/* Sense coixí a dalt: el contingut encastat ja té la separació del marc de «Valors»
   (.pest-contingut, 16px), com a les pàgines soltes. Amb els 14px que hi havia,
   el text (p. ex. «Nom:») quedava massa avall respecte de «Dades bàsiques» dels
   tutors. Es manté el petit coixí lateral. */
.embed-main { padding: 0 4px 0; }
/* També són redundants dins «Valors» el títol de secció (amb la seva nota i línia) i
   el títol del llistat: s'amaguen perquè el formulari («Nom:», «Codi:»…) quedi a dalt,
   igual a totes les seccions. */
.embed-body .topbar,
.embed-body .ent-section,
.embed-body .llista-titol { display: none; }
/* ⚠ EXCEPCIÓ: els llistats que porten l'ajuda d'arrossegar DINS del títol (Cicles
   formatius i Codis CCAE, que ho fan per guanyar una fila de llistat) no la poden
   perdre dins de «Valors»: la mateixa ajuda es veu a totes les altres pestanyes.
   S'amaga només el TEXT del títol i l'ajuda es queda, com una línia solta igual
   que la de les altres pestanyes. */
.embed-body .llista-titol.llista-titol-ajuda {
    display: block; margin: 0 0 6px; font-size: 14px; font-weight: 400;
}
.embed-body .llista-titol.llista-titol-ajuda .llista-titol-text { display: none; }
.embed-body .llista-titol.llista-titol-ajuda .acad-ajuda { margin-left: 0; }
/* En amagar-se la barra de pestanyes, el marc blau de .pest-contingut queda com un
   contorn solt sense sentit (ja l'envolta el marc de «Valors»): es treu en embed. */
.embed-body .pest-contingut { border: 0; border-radius: 0; padding: 0; margin-bottom: 0; }
/* Dins l'iframe de «Valors» el contingut ja va dins el marc de Valors (.alta-wrap
   + .pest-contingut de la pàgina amfitriona). Es treu el coixí propi de .alta-wrap
   de la pàgina encastada perquè les etiquetes quedin a la MATEIXA posició que a les
   pàgines soltes (p. ex. «Nom d'usuari:» de Tutors), i no 11px més endins. */
.embed-body .alta-wrap { padding: 0; }
.input-fitxer { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.btn-fitxer { cursor: pointer; }
.camp-fitxer:focus-within .btn-fitxer { outline: 2px solid #2f7ed8; outline-offset: 2px; }
/* Sota la línia: nom de l'alumne, entitat (centre de treball) i «x acords en aquesta
   entitat», a la MATEIXA distància i mida, en negre. */
.pdf-titols  { margin: 0 0 10px; }
.pdf-alumne  { font-size: 15px; font-weight: 700; color: #000; margin: 0 0 3px; }
.pdf-entitat { font-size: 15px; color: #000; margin: 0 0 3px; }
.pdf-codi    { font-size: 15px; color: #000; margin: 0; }
.pdf-sense-dates { font-size: 14px; color: #c0392b; }
/* Una secció per entitat: nom, els seus acords i, a sota, els seus mesos. */
.pdf-ent { margin-bottom: 14px; }
.pdf-ent-nom { font-size: 14px; font-weight: 700; color: #000; margin: 10px 0 2px; }
/* El nom de l'entitat no es pot quedar sol al final d'una pàgina amb el seu
   calendari a la següent: si el primer mes no hi cap, el nom (i la línia de
   l'acord) se'n van a la pàgina de després. Com que cap mes no es parteix
   (.pdf-mes, break-inside: avoid), amb això n'hi ha prou perquè el bloc comenci
   sencer a la pàgina nova. */
.pdf-ent-nom, .pdf-ent-acord { break-after: avoid; page-break-after: avoid; }
/* Amb més d'una entitat, cada nom queda just sota el calendari de l'anterior:
   se li dóna més aire perquè es vegi que comença un bloc nou. */
.pdf-ent + .pdf-ent .pdf-ent-nom { margin-top: 24px; }
.pdf-ent-acord { font-size: 12px; color: #000; margin: 0 0 2px 10px; }
.pdf-ent .pdf-graella { margin-top: 6px; }
/* Separació clara entre mesos: la fa el «gap» de la graella. En eixamplar-se el
   gap, les columnes s'estrenyen i les caselles surten més petites, però segueixen
   sent quadrades (l'alçada la marca el padding-top: 100% del .cell). */
/* Els mesos van en una TAULA de 4 columnes (4 per fila), NO en CSS grid: el Dompdf
   del servidor no fa grid. Cada mes és un <td class="pdf-mes-cel">; la taula ho
   renderitza igual als dos motors. El coixí entre columnes/files el posa el td. */
.pdf-graella { width: 100%; border-collapse: collapse; table-layout: fixed; }
.pdf-mes-cel { width: 25%; vertical-align: top; padding: 0 0 14px 0; }
/* ⚠ Sota l'ÚLTIMA fila de mesos hi ha la llegenda, i aquella separació ha de ser
   la MATEIXA que hi ha entre la línia de l'acord i la taula del mes: 6px. (Són
   6 i no 8 perquè els marges verticals de dos germans es col·lapsen: el 2px de
   sota de .pdf-ent-acord i el 6px de sobre de la graella donen max(2,6) = 6.)
   Entre files de mesos, en canvi, s'hi queden els 14px de sempre. */
.pdf-graella tr.ultima .pdf-mes-cel { padding-bottom: 6px; }
.pdf-salt { break-after: page; page-break-after: always; }
/* Mesos compactes, com als calendaris d'exemple: barra de títol i cel·les petites. */
/* Tot el mes és una sola taula (títol + capçalera de dies + setmanes) amb
   border-collapse: així TOTES les línies (contorn i quadrícula) són d'1px,
   uniformes i sense dobles. El contenidor no hi posa cap vora. */
/* Cap mes no es parteix entre dues pàgines (també fora de @media print: el Dompdf
   del servidor no sempre aplica les regles de «print»). */
.pdf-mes { border: 0; break-inside: avoid; page-break-inside: avoid; }
/* El mes no omple tota la columna (92 %): separació extra i caselles més petites. */
/* Amplada FIXA del mes (7 columnes × 22px) i centrat dins de la seva casella: així
   les cel·les dels dies són QUADRADES (22×22) i, com que la taula ja no s'estira al
   100%, el Dompdf del servidor no la fa sobresortir dels marges de la pàgina. */
.pdf-cal { width: 154px; margin: 0 auto; border-collapse: collapse; table-layout: fixed; }
.pdf-cal col { width: 22px; }   /* 7 columnes de 22px: amplada = alçada de la cel·la → quadrades */
/* Línies de la quadrícula NEGRES i el més fines possibles (hairline). */
.pdf-cal th, .pdf-cal td { border: 0.5px solid #000; }
/* Fila 1: barra del títol del mes (ocupa les 7 columnes). Text NEGRE (no gris). */
.pdf-cal .pdf-mes-titol { text-align: center; font-weight: 700; font-size: 10px; color: #000; background: #bcd3e2; padding: 2px 0; text-transform: capitalize; }
/* Fila 2: capçalera amb els noms dels dies. */
.pdf-cal thead th.dia { font-size: 7px; color: #000; padding: 1px 0; font-weight: 600; background: #eef2f5; }
/* Files 3a–8a: setmanes. Cel·les QUADRADES — el div interior té padding-top del
   100 % de l'amplada de la cel·la (per tant, alçada = amplada) i el número va a
   dalt a la dreta, posicionat de manera absoluta. */
/* Cel·les amb ALÇADA FIXA i el número a dalt a la dreta en flux normal (abans es
   feia amb padding-top:100% + position:absolute, que el Dompdf del servidor no
   col·loca bé: el calendari sortia «sense cap dia»). Ara ho renderitzen igual els
   dos motors. */
.pdf-cal tbody td { padding: 0; vertical-align: top; height: 22px; }
.pdf-cal tbody .cell { height: 22px; padding: 0 2px 0 0; text-align: right; }
.pdf-cal tbody .cell span { font-size: 8px; }
.pdf-buit { background: #fff; }   /* cel·la buida: pintada (amb vora), sense número */
/* Colors dels dies (els mateixos criteris que el calendari dels acords).
   ⚠ Els quatre colors CONFIGURABLES a «Colors» —horaris, festiu obligatori,
   festiu local i «no es va a l'entitat»— els posa el controlador com a estil en
   línia; les classes d'aquí sota només hi són com a reserva i per documentar
   quin és el valor per defecte de cadascun. */
.pdf-lectiu       { background: #d8f0df; }               /* dia d'estada a l'empresa */
.pdf-cap-setmana  { background: #fff; color: #b03a2e; }  /* no es va a l'entitat */
/* Dissabtes i diumenges: NOMÉS el número en vermell (el fons és el de l'estat del
   dia). Cal !important perquè els dies amb horari porten el color en un style
   inline —igual que .cal-cap-setmana al calendari de la web—. */
.pdf-dissabte-diumenge { color: #d8232a !important; }
.pdf-festiu-oblig { background: #ef8354; color: #4a2200; }
.pdf-festiu-local { background: #f6c445; color: #6b4e00; }
.pdf-fora         { background: #fff; color: #000; }      /* fora del període de l'acord */
/* Llegenda */
/* Llegenda sota el calendari: «Llegenda:» a dalt i, a sota, els colors. */
/* ⚠ TOTES les separacions d'aquest bloc són de 6px, la mateixa que hi ha entre la
   línia de l'acord i la taula del mes: del calendari a «Llegenda:» (la posa el
   coixí de l'última fila de mesos), de «Llegenda:» als colors, i d'una fila de
   colors a la següent. */
.pdf-llegenda { margin-top: 0; font-size: 12px; color: #000; }
.pdf-llegenda-titol { font-weight: 700; margin-bottom: 6px; }
/* Llegenda amb inline-block (no flexbox, que el Dompdf del servidor no fa): els
   ítems queden l'un al costat de l'altre i passen de línia sols si no hi caben.
   ⚠ line-height: 1 i la separació entre files feta amb el margin-bottom dels
   ítems: amb un interlineat gran (hi havia un «2») la distància entre files de
   colors la decidia el mig interlineat, que no es pot quadrar amb els 8px. Com
   que els ítems són inline-block, el seu marge sí que compta per a l'alçada de
   la línia i la separació surt exacta als dos motors. */
.pdf-llegenda-items { line-height: 1; }
.pdf-mostra { display: inline-block; vertical-align: top; margin: 0 18px 6px 0; white-space: nowrap; }
.pdf-sw { width: 14px; height: 14px; border: 1px solid #cdd3d9; border-radius: 3px; display: inline-block; vertical-align: middle; margin-right: 5px; }

@media print {
    .pdf-barra { display: none; }
    .pdf-body { padding: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .pdf-mes { break-inside: avoid; page-break-inside: avoid; }
}

/* ---- Llistat d'entitats: files desplegables (centres/responsables/tutors) ---- */
/* El text va centrat verticalment, com a TOTS els llistats (.taula-llista td).
   L'única excepció és la fila DESPLEGADA (entitats, alumnat…): allà la cel·la del
   detall creix molt i les altres (CIF/NIF, població, alta, accions) han de quedar
   a dalt, no al mig. */
.taula-llista tr:has(.ent-detall:not([hidden])) td {
    vertical-align: top;
    /* En desplegar, la fila creix i les cel·les passen a alinear-se a dalt; si no
       es compensés, el text saltaria cap amunt. La compensació és exactament el
       que el «vertical-align: middle» deixava per sobre de la línia en una fila
       normal: (alçada de fila 31px − line-height 18px) / 2 = 6,5px, menys els 2px
       de padding que ja hi ha. Així, en desplegar, NOMÉS es mou el triangle. */
    padding-top: 6px;
}
.cel-desplega { white-space: nowrap; }
/* El triangle de desplegar té la MATEIXA mida que el dels menús (.menu-fletxa,
   10px) i fa servir el glif ple ▶. A 10px cap de sobres dins la línia de la
   cel·la (line-height 18px), així la fila amb desplegable fa la mateixa alçada
   que una sense. */
/* El «vertical-align: middle» el deixa 2,4px per sota del mig de la fila (el glif
   ▶ no ocupa tota la caixa de la lletra): es puja amb «top» i no amb «transform»,
   que està ocupat pel gir de .obert. */
.ent-desplega { display: inline-block; vertical-align: middle; position: relative; top: -2.4px; background: none; border: 0; cursor: pointer; font-size: 10px; line-height: 1; color: #4a5560; padding: 0 5px 0 0; transition: transform .12s; }
.ent-desplega.obert { transform: rotate(90deg); }
/* Desplegable dels períodes d'un acord (llistat d'acords): mateixa mida. */
.acord-desplega { font-size: 10px; vertical-align: middle; }
.acord-periodes { margin-top: 3px; font-size: 12px; color: #555; }
.acord-periodes div { white-space: nowrap; padding: 1px 0; }
.ent-detall { margin-top: 6px; padding: 6px 0 4px 10px; border-left: 2px solid #dfe4e9; font-size: 13px; font-weight: 400; color: #333; white-space: normal; }
.ent-detall-sec { margin: 3px 0; }

/* ---------- Convenis amb les entitats (Entitats > Convenis) ---------- */
/* Mateix codi de colors que la resta de la web: verd = viu, vermell = caducat i
   blau = encara no ha començat (pendent), que no és cap problema, només un avís
   que avui aquell conveni encara no val. */
/* Els SIS estats d'un conveni, cadascun amb el seu color (Conveni::classeEstat()):
   gris = encara no s'hi ha fet res · blau = esperant algú · turquesa = acceptat
   però encara no en vigor · verd = en vigor · vermell = rebutjat · ocre = acabat.
   ⚠ «Denegat» i «Caducat» NO poden compartir color: l'un és que l'administració
   ha dit que no i l'altre que se li ha passat la data, i no és el mateix. */
.badge.conv-sense   { background: #eceff1; color: #55606b; }
.badge.conv-pendent { background: #e4eefb; color: #1c5a99; }
.badge.conv-validat { background: #e2f1f2; color: #14666e; }
.badge.conv-vigent  { background: #e3f3e6; color: #1d6b2c; }
.badge.conv-denegat { background: #fbe4e4; color: #9b2222; }
.badge.conv-caducat { background: #fdeee0; color: #8a5019; }
/* La badge de la baixa va al costat del nombre de convenis, a «Sense convenis»:
   sense una mica d'aire s'hi enganxa. Classe pròpia i no «.badge dins d'un td»,
   que també enxamparia la de l'estat, que va sola a la seva cel·la. */
.conv-quants-baixa { margin-left: 6px; }
/* ⚠ El formulari va de punta a punta, sense cap topall d'amplada: les files de
   camps han d'arribar fins al final del marc. Qui s'endú tot el que sobra de
   cada fila és el camp .conv-ample (el «Responsable», el nom del notari/ària, la
   localitat), i així l'últim camp de la fila acaba tocant la vora dreta. */
/* ⚠ TOT el text de la fitxa fa LA MATEIXA mida: 14 px, la dels formularis de la
   resta de l'aplicació. Abans cada peça anava per lliure (etiquetes a la mida
   del navegador, caixes a 15 i línies d'ajuda a 13) i la fitxa es veia
   desendreçada. Les caixes, els desplegables i els botons NO hereten la mida del
   pare, i per això hi són anomenats un per un.
   Queden fora els botons blaus (.btn-crear) i les pestanyes, que són peces
   compartides amb la resta de pàgines i han de ser iguals a tot arreu. */
#form-conveni,
#form-conveni input,
#form-conveni select,
#form-conveni textarea,
#form-conveni button { font-size: 14px; }
/* Fitxa del conveni: les dues dates una al costat de l'altra mentre hi càpiguen. */
/* ⚠ «align-items: flex-end» a les dues files de camps: amb les etiquetes que es
   parteixen en dues línies, els camps de la fila han de quedar alineats per la
   CAIXA (a baix) i no per l'etiqueta, que si no el que té l'etiqueta curta se'n
   va amunt i la fila queda escalonada. És el mateix que fa .alta-form.compacta. */
.conv-dates { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin: 14px 0 6px; }
.conv-camp { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.conv-camp input { padding: 5px 7px; border: 1px solid #b7c6d6; border-radius: 4px; }
/* ⚠ Amplada dels camps que NO s'han d'estirar: mana la caixa i, si l'etiqueta és
   més llarga, es parteix en dues línies. Sense això passava a l'inrevés —era
   l'etiqueta qui estirava el camp— i «Data de finalització» o «Data d'escriptura
   pública» deixaven una caixa de data d'un pam amb mig dit de dia a dins.
   Les mides segueixen les de la resta de l'app: els caràcters que hi han de
   cabre, +22px de farciment i vores i +28px del control que el navegador hi
   afegeix a dins (el calendari de les dates, el triangle dels desplegables). */
.conv-w-data { width: calc(10ch + 50px); }   /* dd/mm/aaaa */
.conv-w-sexe { width: calc(5ch + 50px); }    /* Home / Dona */
/* El número de protocol és curt i l'etiqueta («Núm. protocol:») és més ampla que
   ell: aquí mana l'ETIQUETA i la caixa s'hi ajusta, en comptes de deixar-hi un
   pam de caixa buida. L'amplada la marca el contingut (width: auto) i, com que
   l'etiqueta no es parteix, és ella qui la decideix; el «size» del camp la manté
   per sota (vegeu entitats/_conveni.php). */
.conv-w-prot { width: auto; }
.conv-w-prot > span { white-space: nowrap; }
.conv-w-data input, .conv-w-sexe select, .conv-w-prot input { width: 100%; }
/* La població del notari/ària és un desplegable escrivible (.combo): la caixa va
   dins d'un embolcall i, sense això, no s'estiraria fins al final del camp (els
   <input> no s'inflen sols dins d'un bloc, i .conv-camp només estira els seus
   fills DIRECTES). */
.conv-camp .combo-camp, .conv-camp .combo-camp input { width: 100%; }
.conv-ajuda { margin: 4px 0 0; color: #55606b; }
/* Centres de treball que van a l'Annex 1 del document. Van al final del
   formulari, separats amb una línia com hi anava el bloc del PDF: és l'últim
   pas, quan les dates i qui signa ja estan decidits. */
.conv-centres { margin: 16px 0 4px; padding-top: 14px; border-top: 1px solid #e3e9f0; }
.conv-centres-tit { font-weight: 600; }
.conv-centres-llista { margin: 6px 0 0; padding: 0; list-style: none; }
.conv-centres-llista li { margin: 3px 0; }
.conv-centres-llista label { display: inline-flex; align-items: baseline; gap: 6px; cursor: pointer; }
.conv-ct-nom { font-weight: 600; }
/* L'adreça i la població, en segon terme: distingeixen dos centres que es diguin
   igual, però qui es busca a la llista és el NOM. */
.conv-ct-detall { color: #55606b; }
/* El marc que es baixa el PDF en tornar del desat: no s'ha de veure (el document
   arriba com a fitxer adjunt i el llistat es queda tal com és). No es pot amagar
   amb «display: none» —hi ha navegadors que llavors no en carreguen el contingut—
   i per això se'n va fora de la vista. */
.conv-pdf-marc { position: absolute; width: 0; height: 0; border: 0;
    visibility: hidden; }
/* El centre i l'entitat: no es demanen, només es mostren.
   ⚠ SENSE marge a sobre: així «Centre:» arrenca a la mateixa distància de la
   pestanya «Dades» que l'etiqueta «Document» a la fitxa de l'entitat —els 16px
   de coixí del marc blau (.pest-contingut) i res més. */
.conv-sabudes { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px;
    margin: 0; }
.conv-sabudes dt { color: #55606b; }
.conv-sabudes dd { margin: 0; font-weight: 700; color: #2a3f55; }
/* El CIF/NIF va entre parèntesis al costat del nom i es llegeix IGUAL que ell
   (no és una dada de segon terme com a la resta de llistats). */
.conv-doc { color: inherit; font-weight: inherit; }
/* Bloc de qui signa en nom de l'entitat: ni títol, ni subtítols, ni requadre.
   ⚠ Tampoc cap coixí propi: amb un farciment a l'esquerra, aquests camps
   arrencarien més endins que els de la fila de les dates i no anirien de punta a
   punta. Només la separació de sobre i de sota. */
.conv-bloc { margin: 16px 0 4px; }
.conv-fila { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 8px; }
/* ⚠ IMPRESCINDIBLE: l'atribut «hidden» amaga amb «display: none» del navegador,
   i qualsevol regla nostra amb «display» el guanya. Sense això, el bloc de la
   Junta General (que és un .conv-fila) sortia SEMPRE, fos quin fos el tractament.
   Val per a tota la fitxa, que amaga i ensenya blocs segons el que es triï. */
.conv-fitxa [hidden] { display: none; }
/* El camp que s'endú l'espai que sobra de la seva fila (nom, localitat, text). */
.conv-ample { flex: 1; min-width: 200px; }
.conv-camp select, .conv-camp textarea { padding: 5px 7px;
    border: 1px solid #b7c6d6; border-radius: 4px; font-family: inherit; }
/* ⚠ FONS BLANC I LLETRA FOSCA als desplegables (responsable, sexe, tractament,
   sexe del notari/ària): sense dir-ho, el navegador els pinta amb el seu gris de
   sèrie i semblaven camps deshabilitats. És el mateix que fa .field select a la
   resta de formularis de l'aplicació. */
.conv-camp select { background: #fff; color: #1f2d3d; }
.conv-text { display: flex; margin-top: 12px; }
.conv-text textarea { width: 100%; box-sizing: border-box; resize: vertical; line-height: 1.4; }
.conv-avis { color: #9b2222; }
/* L'avís de les dates que es trepitgen va a la MATEIXA fila que les dues caixes
   de data (que és una fila flexible): amb «flex: 1 0 100%» es queda tot sol a la
   línia de sota i no empeny els altres camps. */
.conv-avis-dates { flex: 1 0 100%; margin: 0; }
/* Camp amb un valor que no pot ser (les dates que es trepitgen amb un altre
   conveni): el mateix vermell que els camps obligatoris buits de tota l'app. */
.conv-mal { border-color: #c0392b !important; background: #fdeeee; }
/* La caixa del text NO es pot escriure (la fa el servidor), però tampoc no ha de
   semblar deshabilitada: fons blanc i lletra normal, com la resta de camps. El
   cursor de text diria que s'hi pot escriure i per això es deixa el de fletxa. */
.conv-text textarea[readonly] { background: #fff; color: #1f2d3d; cursor: default; }
/* ⚠ UN CONVENI JA FET NOMÉS ES CONSULTA: tots els camps van deshabilitats i,
   AQUÍ SÍ, s'han de veure clarament grisos —que és el que vol dir que no s'hi pot
   tocar—, amb els mateixos colors que la resta de camps deshabilitats de
   l'aplicació (.field input:disabled). Va DESPRÉS de la regla del «readonly» de
   sobre: totes dues pesen igual i mana l'última. */
.conv-fitxa input:disabled,
.conv-fitxa select:disabled,
.conv-fitxa textarea:disabled {
    background: #dfe3e7;
    color: #6b757e;
    -webkit-text-fill-color: #6b757e;   /* alguns navegadors difuminen el text deshabilitat */
    border-color: #ccd2d8;
    opacity: 1;
    cursor: not-allowed;
}
/* Les caselles dels centres de treball i el seu text, quan només es consulten. */
.conv-fitxa input:disabled + .conv-ct-nom,
.conv-fitxa label:has(input:disabled) { color: #55606b; cursor: default; }

/* ---------- El conveni SIGNAT i el seu estat, dins de la fitxa ----------
   Un bloc discret a dalt del panell: on és el conveni del circuit de validació
   («Pendent» → «Validat» o «Denegat»), l'enllaç per mirar el PDF carregat i, per
   a l'administració, els dos botons de resoldre'l.
   ⚠ Ni títol ni requadre cridaner: la resta de la fitxa tampoc no en porta. */
.conv-validacio { margin: 0 0 14px; }
.conv-validacio-linia {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 4px;
    color: #55606b;
}
.conv-validacio .camp-nota { margin: 2px 0 0; }
.conv-validacio-accions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
/* Els <form> d'un sol botó no han d'afegir cap marge propi: qui separa els
   botons és el «gap» del contenidor. */
.conv-validacio-accions form { margin: 0; }

/* ---------- Historial d'entitats (registre de canvis) ---------- */
/* Les tres accions es distingeixen pel color, com els botons de la resta de la
   web: verd = alta, blau = modificació, vermell = baixa. */
.badge.hist-alta     { background: #e3f3e6; color: #1d6b2c; }
.badge.hist-modifica { background: #e4eefb; color: #1c5a99; }
.badge.hist-baixa    { background: #fbe4e4; color: #9b2222; }
/* Document de l'entitat: dada de context, en segon terme i a la línia de sota
   per no allargar la fila. */
.hist-doc { display: block; font-size: 12px; font-weight: 400; color: #7a848f; }
/* Aquestes dues van a la MATEIXA línia que el text que acompanyen —el rol, al
   costat del nom de qui va fer el canvi; el nom curt del cicle formatiu, al
   costat del llarg— i per això no són «display: block» com .hist-doc. */
.hist-rol,
.hist-curt { font-size: 12px; font-weight: 400; color: #7a848f; }
.hist-res { color: #8a95a1; }
/* «Entitat eliminada» a la columna «Canvis» d'una baixa: apagat com el guionet
   de les altres files, que és informació de context i no un canvi. */
.hist-baixa-txt { color: #8a95a1; }
.hist-canvis { list-style: none; margin: 0; padding: 0; font-size: 13px; font-weight: 400; white-space: normal; }
.hist-canvis li { padding: 1px 0; }
.hist-camp { color: #55606b; }
/* El valor d'abans queda ratllat i apagat, i el nou en negreta: així es veu el
   sentit del canvi d'una ullada, sense haver de llegir la fletxa. */
.hist-abans { color: #8a95a1; text-decoration: line-through; }
.hist-fletxa { color: #7a848f; padding: 0 2px; }
.hist-despres { font-weight: 600; }
.ent-detall-sec b { color: #4a5560; }
.ent-detall ul { margin: 2px 0 4px; padding-left: 18px; }
.ent-detall li { margin: 1px 0; }
/* Al llistat de seguiments el detall va a la 1a columna, que és estreta: cada
   acord es manté en una sola línia i, en desplegar, la columna s'eixampla. */
.taula-seg .ent-detall li { white-space: nowrap; }
/* Els TRES llistats de seguiments tenen les mateixes amplades: cada columna just
   el que ocupa el seu contingut i «Alumne/a» (la 1a) s'endú tot el que sobra. */
/* ⚠ Cal repetir les tres classes: «.taula-llista.taula-principal th:not(.col-ampla)»
   (més amunt) té més especificitat i, si no, guanya ella. */
.taula-llista.taula-principal.taula-seg { width: 100%; }
.taula-llista.taula-principal.taula-seg td { width: 1%; white-space: nowrap; }
/* Les capçaleres van en una sola línia mentre la taula hi càpiga (com a la resta
   de llistats); si no hi cap, passen a dues línies (.caps-2linies, més avall) i,
   si tot i així es desplaça de costat, la columna d'accions es queda enganxada a
   la vora dreta (regla de més avall), que és el que no es pot perdre. */
.taula-llista.taula-principal.taula-seg thead th { width: 1%; white-space: nowrap; overflow: visible; }
/* La 1a columna (Alumne/a) s'endú tot l'espai que sobra i és la que cedeix
   primer quan no hi cap tot. */
.taula-llista.taula-principal.taula-seg thead th:first-child,
.taula-llista.taula-principal.taula-seg td:first-child { width: 100%; white-space: normal; min-width: 120px; }
/* La columna d'ACCIONS no es pot perdre per la dreta passi el que passi:
   queda enganxada a la vora encara que la taula s'hagi de desplaçar. */
.taula-llista.taula-principal.taula-seg thead th:last-child,
.taula-llista.taula-principal.taula-seg td:last-child {
    position: sticky;
    right: 0;
    background-color: inherit;
}
.taula-llista.taula-principal.taula-seg thead th:last-child { background-color: #4a4a4a; }
.taula-llista.taula-principal.taula-seg tbody tr { background-color: #fff; }
.taula-llista.taula-principal.taula-seg tbody tr:nth-child(even) { background-color: var(--llista-gris, #dfe3e8); }
.taula-llista.taula-principal.taula-seg tbody tr.sel { background-color: var(--llista-sel, #aed2f7); }
.ent-detall-cap { color: #7b8794; }

/* ---------- Columna «Alumne/a»: la MÉS IMPORTANT del llistat ----------
   Quan la finestra s'estreny és la primera que cedeix l'espai que li sobra, però
   MAI per sota del nom sencer: no es parteix en dues línies ni s'escapça amb «…».
   La resta de columnes amples (entitat, centre de treball…) sí que poden partir
   el text, i si encara no hi cap tot, el llistat es desplaça de costat. */
.taula-llista.taula-principal th.col-alumne,
.taula-llista.taula-principal td.col-alumne,
.taula-llista.taula-principal.taula-seg thead th.col-alumne,
.taula-llista.taula-principal.taula-seg td.col-alumne {
    white-space: nowrap;
    text-overflow: clip;
}

/* ---------- Capçaleres a dues línies quan el llistat no cap ----------
   Un títol de dues paraules es parteix per l'espai (mai per dins d'una paraula)
   en comptes de fer més ample el llistat. La classe la posa taula-capsaleres.js,
   que mesura SEMPRE amb les capçaleres en una sola línia; si partides encara no
   hi caben, aquell mateix fitxer passa als noms curts (data-curt). */
.taula-llista.caps-2linies thead th,
.taula-llista.taula-principal.caps-2linies thead th,
.taula-llista.taula-principal.taula-seg.caps-2linies thead th,
.taula-llista.caps-2linies thead th.col-dates,
.taula-llista.caps-2linies thead th.col-min {
    white-space: normal;
    overflow-wrap: normal;
    word-break: keep-all;
}

/* ---------- Llistat d'acords: la columna «Codi», estreta si cal ----------
   De sèrie la columna s'ajusta al contingut (.col-min): els codis fan fins a 12
   caràcters (el CIF de l'entitat i el número: «B84819484-10») i la columna es
   queda just en aquesta amplada.
   Quan la taula no cap al marc, però, la que se'n va per la dreta és «Hores
   planificades», que és de les que s'han de poder llegir d'un cop d'ull. Llavors
   taula-capsaleres.js posa .codi-estret i el «Codi» cedeix l'espai: es retalla
   amb punts suspensius (l'«overflow: hidden» i el «text-overflow» ja els porta
   .taula-llista td) i el farciment de la cel·la baixa de 12 a 4 px per banda.
   Entre les dues coses la columna passa d'uns 114 px a uns 68: prou perquè
   «Hores plan.» hi càpiga.
   ⚠ El codi sencer no es perd: la cel·la el porta al «title» (_fila.php), o sigui
   que es veu passant-hi el ratolí per sobre, com a «CF» i «Tipus». El «width» és
   només una proposta per a la taula (table-layout: auto); qui la fa complir és el
   «max-width». */
.taula-llista.taula-principal.codi-estret th.col-codi,
.taula-llista.taula-principal.codi-estret td.col-codi {
    width: calc(8ch + 8px);
    max-width: calc(8ch + 8px);
    padding-left: 4px;
    padding-right: 4px;
}

/* ---------- La columna d'ACCIONS no es perd mai per la dreta ----------
   Amb la finestra estreta el llistat es desplaça de costat, però els botons
   d'acció queden enganxats a la vora dreta i sempre es veuen. Ja ho feien els
   seguiments (regla de sobre); això ho estén a la resta de llistats, sempre que
   les accions siguin l'última columna. */
.taula-llista.taula-principal:has(td.cel-accions:last-child) thead th:last-child,
.taula-llista.taula-principal td.cel-accions:last-child {
    position: sticky;
    right: 0;
    background-color: inherit;
}
.taula-llista.taula-principal:has(td.cel-accions:last-child) thead th:last-child {
    background-color: #4a4a4a;
}

/* Columnes «Inici» i «Data fi» dels llistats: amplada mínima, ajustada al contingut. */
/* Columna de dates: amplada MÍNIMA (1% + nowrap) i sense retallar el contingut
   (cal més especificitat que «.taula-llista td», que posa overflow:hidden). */
.col-dates { white-space: nowrap; width: 1%; }
/* Columna a l'amplada mínima del contingut (n. acords, nota, accions…). */
.col-min { white-space: nowrap; width: 1%; }
.taula-llista th.col-dates, .taula-llista td.col-dates {
    white-space: nowrap; width: 1%; overflow: visible; text-overflow: clip; max-width: none;
}

/* ---------- Columnes ESTRETES del llistat d'acords ----------
   ⚠ Amplada FIXA, no la del contingut: aquestes dues columnes portaven text
   llarg (el nom sencer d'un cicle sense nom curt, «dual intensiva») i
   s'eixamplaven fins a menjar-se l'espai de les que sí que s'han de llegir
   senceres (Alumne/a, Entitat, Centre de treball). Ara el text que no hi cap es
   retalla amb punts suspensius; per veure'l sencer, doble clic a la fila —que
   obre l'acord— o passar-hi el ratolí per sobre, que el «title» de la cel·la en
   porta el nom complet.
   El «width» és només una proposta per a la taula, que reparteix segons el
   contingut: cal el «max-width» perquè la respecti. +24px del farciment de la
   cel·la (12 a cada costat). */
.taula-llista th.col-cf, .taula-llista td.col-cf {
    /* Tres caràcters: el nom curt d'un cicle (DAM, DAW, CAI…). */
    width: calc(3ch + 24px); max-width: calc(3ch + 24px);
}
.taula-llista th.col-tipus-acord, .taula-llista td.col-tipus-acord {
    /* Prou per a «dual gen…» / «dual int…»; «FCT» (3 lletres) hi cap sencer. */
    width: calc(8ch + 24px); max-width: calc(8ch + 24px);
}
/* «Tutor/a centre»: aquí no es retalla la CAPÇALERA sinó que es parteix en dues
   línies («Tutor/a» i «centre»), i la columna es queda a l'amplada de la paraula
   més llarga. Els noms de sota s'hi ajusten i, si no hi caben, es retallen com a
   les altres dues. ⚠ Cal desfer el «white-space: nowrap» i l'«overflow: hidden»
   que .taula-llista thead th posa a TOTES les capçaleres, que són justament els
   que impedeixen que cap es parteixi. */
.taula-llista th.col-tutor-centre {
    white-space: normal; overflow: visible; text-overflow: clip;
}
.taula-llista th.col-tutor-centre, .taula-llista td.col-tutor-centre {
    width: calc(7ch + 24px); max-width: calc(7ch + 24px);   /* «Tutor/a» */
}

/* Camp «Hores» de l'acord: no és cap caixa de text, només una ETIQUETA amb les
   hores del cicle (mateix blau i pes que els valors de només lectura del
   seguiment), alineada amb els camps de la seva fila. Al costat, si l'acord es
   va FINALITZAR ANTICIPADAMENT, l'avís en vermell (el mateix dels altres avisos). */
.field output#hores { display: flex; align-items: center; min-height: 34px;
    font-size: 15px; font-weight: 600; color: #1e5aa8; }
.field .hores-linia { display: flex; align-items: center; gap: 14px; }
.hores-fin-avis { color: #a3271c; font-weight: 600; font-size: 14px; white-space: nowrap; }
/* «(Hores mínimes: N)» al costat de les hores, només en dual intensiva: mateixa
   mida que la resta de textos petits, en to apagat perquè és una dada informativa. */
.hores-minimes { color: #56616c; font-size: 14px; white-space: nowrap; }
.hores-minimes:empty { display: none; }

/* Botó «Elimina filtres» sota el cercador ràpid del llistat. */
.cerca-neteja-fila { margin-top: 8px; }