:root {
    color-scheme: light only;

    /* Paleta extreta de la web real de l'Aspirantat */
    --brand-dark: #14632f;
    --brand-dark-hover: #0e4a22;
    --brand-light: #6eb559;
    --brand-pale: #c9e4a3;

    --ink: #16241a;
    --muted: #5c6b5e;
    --paper: #f5f8f2;
    --card: #ffffff;
    --border: #dfe8da;

    --danger: #b83227;
    --danger-bg: #fbeae7;
    --success: #1f7a3d;
    --success-bg: #e7f4e2;
    --warning-bg: #fdf3d9;
    --warning-ink: #8a6a12;
    --mena-bg: #e7edf7;
    --mena-ink: #3d5580;

    --radius: 12px;
    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--paper);
    color: var(--ink);
    line-height: 1.55;
}

/* Els enllaços dins del text, del verd del portal i no del blau del
   navegador. Qualsevol classe (.btn, la capçalera...) mana per sobre. */
a { color: var(--brand-dark); }

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- Capçalera ---------- */

.site-header {
    background: var(--brand-dark);
    padding: 14px 0;
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* Al panell la barra va més ampla que el contingut de la pàgina: amb els 900px
   de .container els tres blocs queden encaixonats. A les pàgines de família,
   amb dos blocs, no cal. */
.site-header .capcalera-panell { max-width: 1140px; }

/* Tres blocs: logo i navegació principal a l'esquerra, seccions al mig, sessió
   a la dreta. El space-between del contenidor els reparteix l'ample, o sigui que
   el bloc del mig queda entremig dels dos costats. */
.header-esquerra {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

/* Amb els tres blocs del panell la barra deixa de cabre en una línia molt abans
   que el mòbil: a partir d'aquí es reparteixen en files centrades, si no la dreta
   queda penjant tota sola a l'esquerra de la segona línia.
   El límit era de 860px quan a l'esquerra hi havia dues pestanyes sense icona;
   amb nou pestanyes amb icona la barra ja demana tota l'amplada de la
   capçalera, o sigui que el trencament va on s'acaba (.capcalera-panell). */
@media (max-width: 1140px) {
    .site-header .capcalera-panell { justify-content: center; }
    .site-header .capcalera-panell .header-esquerra {
        flex-basis: 100%;
        justify-content: center;
    }
}

.site-header .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.05rem;
}

.logo-img {
    height: 64px;
    width: auto;
    /* El logo és verd sobre transparent; el fem blanc per la capçalera fosca */
    filter: brightness(0) invert(1);
}

.site-header nav {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.site-header nav a {
    /* Icona i text a la mateixa pastilla: amb inline-flex la icona queda
       centrada amb el text i no penjada de la línia de base com faria una
       imatge qualsevol. */
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--brand-pale);
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}
.site-header nav a:hover {
    background: rgba(255,255,255,0.12);
    color: white;
}

/* L'Àrea Familiar, a la barra de les pàgines de família. Va en blanc i gruixuda
   perquè és on es torna, però sense pastilla: la pastilla diu on ets, i pintada
   sempre feia semblar que ho estaves fins i tot a la configuració. */
.site-header nav a.nav-principal {
    color: white;
    font-weight: 700;
}

/* La pestanya on ets (aria-current, a includes/vistes/header.php i, al panell,
   pestanya_admin_actual() de includes/panell/tria_activitat.php): en blanc, gruixuda
   i amb una ratlla a sota, com una pestanya de les de sempre. Sense fons: dins
   la càpsula de l'activitat una pastilla translúcida quedava difuminat sobre
   difuminat, i una de blanca plena es confondria amb el nom de l'activitat.
   Val igual al panell que a les pàgines de família, i per a la rodeta. */
.site-header nav a[aria-current="page"] {
    position: relative;
    background: none;
    color: white;
    font-weight: 700;
}
.site-header nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 1px;
    height: 2px;
    border-radius: 2px;
    background: white;
}
.site-header nav a[aria-current="page"]:hover { background: rgba(255,255,255,0.12); }
/* A la rodeta, que és una icona sola, la ratlla va a mida de la icona. */
.site-header nav a.nav-rodeta[aria-current="page"]::after { left: 8px; right: 8px; bottom: 0; }

/* El distintiu de "Només lectura" d'un monitor/a (includes/vistes/header.php). No és
   un <a> ni viu dins d'un <nav>: perquè no es confongui amb una pestanya més
   porta vora en lloc de fons ple (les pestanyes no en porten cap) i cursor
   normal, sense el canvi de fons que fan totes en passar-hi per sobre. La
   vora blanca semitransparent és el que li dona prou contrast sobre el verd
   fosc sense arribar a cridar tant com el text blanc pla. */
.distintiu-lectura {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 4px;
    padding: 5px 12px;
    border: 1px solid rgba(255,255,255,0.55);
    border-radius: 999px;
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: default;
}
.distintiu-lectura svg { flex: none; }
/* El commutador Visual | Edició dels administradors (includes/vistes/header.php). És
   el mateix gest que el de Configuració, girat per a la barra fosca: un calaix
   fosc amb les dues opcions i una bola blanca a sobre de la que val. Veure les
   dues opcions alhora és el que diu que es pot passar a l'altra; la mà del
   cursor i la vora que s'encén en passar-hi per sobre, que es pot prémer.
   Es pinten els dos formularis (un per sentit) i només se'n veu un: qui mana
   és la classe "lectura" del <body>, perquè el mode d'edició és per pestanya i
   el servidor no sap si aquesta en té el testimoni (assets/mode-edicio.js). */
.commutador-mode { margin: 0 0 0 4px; }
body.lectura .commutador-mode-desactivar,
body:not(.lectura) .commutador-mode-activar,
body.lectura .mode-edicio-quan-edicio,
body:not(.lectura) .mode-edicio-quan-visual { display: none; }
.commutador-mode-boto {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    width: 176px;
    height: 34px;
    padding: 3px;
    border: 1px solid rgba(255,255,255,0.55);
    border-radius: 999px;
    background: rgba(0,0,0,0.22);
    font: inherit;
    line-height: 1;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}
.commutador-mode-boto:hover { border-color: white; background: rgba(0,0,0,0.32); }
.commutador-mode-boto:focus-visible { outline: 2px solid white; outline-offset: 2px; }
.commutador-mode-opcio {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 100%;
    color: rgba(255,255,255,0.72);
    font-size: 0.8rem;
    font-weight: 700;
    transition: color .2s;
}
.commutador-mode-opcio svg { flex: none; }
.commutador-mode-punt {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 3px);
    border-radius: 999px;
    background: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
/* L'opció on és la bola, en verd sobre blanc; l'altra, en passar-hi per
   sobre, s'encén: és on aniràs si cliques. */
.commutador-mode-activar .commutador-mode-opcio:nth-child(1),
.commutador-mode-desactivar .commutador-mode-opcio:nth-child(2) { color: var(--brand-dark); }
.commutador-mode-activar .commutador-mode-boto:hover .commutador-mode-opcio:nth-child(2),
.commutador-mode-desactivar .commutador-mode-boto:hover .commutador-mode-opcio:nth-child(1) { color: white; }
.commutador-mode-desactivar .commutador-mode-punt { transform: translateX(100%); }

/* El marc de l'activitat (includes/panell/tria_activitat.php): Famílies i Infants
   van dins d'una càpsula que comença amb el nom de l'activitat que es mira.
   Diu d'una ullada que aquelles dues pestanyes són «d'aquesta activitat», i el
   nom es pot clicar per canviar-la, que es fa poc. Sense filtre la càpsula és
   gairebé invisible; amb una activitat triada s'encén una mica, perquè no
   s'oblidi que la llista no les té totes. */
/* A la dreta hi ha pestanyes, el commutador de mode i la rodeta: de mides
   diferents, centrats en alçada. */
.site-header nav.nav-dreta { align-items: center; }

.nav-activitat {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 4px 3px 3px;
    border-radius: 12px;
    background: rgba(255,255,255,0.07);
    max-width: 100%;
}
.nav-activitat.amb-filtre { background: rgba(255,255,255,0.14); }
/* El nom de l'activitat fa d'etiqueta del marc: un requadre clar, com una
   pestanya de carpeta, i les dues pestanyes al costat, a dins. */
.nav-activitat-tria > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* al mòbil s'encongeix el nom, no les pestanyes */
    max-width: min(210px, 36vw);
    padding: 6px 10px;
    margin-right: 4px;
    border-radius: 9px;
    background: rgba(0,0,0,0.18);
    color: rgba(255,255,255,0.8);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: color .15s, background .15s;
}
.nav-activitat.amb-filtre .nav-activitat-tria > summary {
    background: white;
    color: var(--brand-dark);
    font-weight: 700;
}
.nav-activitat-tria > summary:hover { color: white; background: rgba(0,0,0,0.28); }
.nav-activitat.amb-filtre .nav-activitat-tria > summary:hover { background: var(--brand-pale); color: var(--brand-dark); }
.nav-activitat-tria > summary svg { flex: none; }
.nav-activitat-tria[open] > summary svg:last-child { transform: rotate(180deg); }
/* La llista, plana: una fila per activitat, separades per una ratlla fina i
   sense quadres. La triada porta una barra verda a l'esquerra. */
.nav-activitat .tria-llista {
    left: 0;
    right: auto;
    padding: 0;
    border-radius: 8px;
    overflow: hidden auto;
    text-align: left;
}
.nav-activitat .tria-opcio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 9px 14px;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-left: 3px solid transparent;
    border-radius: 0;
    background: none;
    color: var(--ink);
}
.nav-activitat .tria-opcio:hover { background: var(--paper); color: var(--ink); }
.nav-activitat .tria-opcio.es-triada {
    border-left-color: var(--brand-dark);
    background: var(--paper);
}
/* «Gestionar activitats»: al peu de la llista, sobre un fons apart, i fet
   botó perquè no es llegeixi com una activitat més. És el mateix .icon-btn
   (blanc, vora fina, text i fletxa verds) que el «Gestionar activitats» del
   Panell: el mateix botó no ha de tenir dues cares. */
.nav-activitat .tria-peu {
    padding: 10px 14px;
    background: var(--paper);
}
/* (La barra de dalt pinta tots els seus enllaços de pastilla verd pàl·lid, i
   guanya a .icon-btn: per això es repeteix aquí el que cal) */
.nav-activitat a.tria-gestio {
    display: flex;
    justify-content: center;
    min-height: 44px;
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--card);
    color: var(--brand-dark);
    font-size: 0.85rem;
    font-weight: 600;
}
.nav-activitat a.tria-gestio:hover { background: var(--brand-pale); color: var(--brand-dark); }

/* Al mòbil les tres pestanyes i el nom no caben en una fila: el nom va a dalt,
   a tota l'amplada de la càpsula, i les pestanyes a sota. El desplegable ocupa
   el mateix ample que la càpsula. */
@media (max-width: 600px) {
    .nav-activitat { flex-wrap: wrap; justify-content: center; padding: 4px; }
    .nav-activitat-tria { flex-basis: 100%; }
    .nav-activitat-tria > summary {
        max-width: none;
        margin: 0 0 2px;
        justify-content: center;
    }
    .nav-activitat .tria-llista { right: 0; min-width: 0; max-width: none; }
}

/* La icona de cada pestanya (includes/nucli/icones.php): agafa el color del text,
   o sigui que s'aclareix sola quan s'hi passa per sobre. El flex-shrink és
   perquè quan la barra va justa d'ample encongeixi el text i no el dibuix. */
.site-header nav a svg {
    display: block;
    flex: none;
}

/* El <main> sempre porta també la classe .container (veure includes/vistes/header.php),
   i .container guanya per especificitat: per això el padding vertical s'ha
   d'escriure aquí, si no es queda mut. */
main.container { padding: 20px 20px 20px; }

/* El primer bloc de cada pàgina arrenca sempre a la mateixa alçada:
   així el títol queda a la mateixa distància de la capçalera a totes. */
main > :first-child { margin-top: 0; }

.site-footer {
    padding: 18px 0 26px;
    color: var(--muted);
    font-size: 0.8rem;
}

/* Una sola línia centrada; en mòbil parteix per trossos sense fer-se alta. */
.footer-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2px 8px;
}

.footer-enllac {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.15s ease;
}
.footer-enllac:hover { color: var(--brand-dark); }

.footer-sep { opacity: 0.5; }

/* ---------- Targetes ---------- */

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 26px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(20,99,47,0.06);
}

h1, h2, h3 {
    color: var(--brand-dark);
    font-weight: 700;
}
h1 { font-size: 1.7rem; }
h2 { font-size: 1.25rem; }

/* ---------- Formularis ---------- */

form label {
    display: block;
    margin-top: 14px;
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--ink);
}

form input, form select, form textarea {
    width: 100%;
    padding: 10px 13px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    background: var(--paper);
    color: var(--ink);
    transition: border-color 0.15s ease;
}
form input:focus, form select:focus, form textarea:focus {
    outline: none;
    border-color: var(--brand-light);
    background: white;
}

/* ---------- Camp amb un tros ja escrit («Família» + el cognom) ----------

   El prefix no és text que s'hagi de teclejar: va imprès a l'esquerra de la
   casella, en una capseta grisa, i dins només s'hi escriu la resta. La vora i
   el focus són els de la capsa sencera, perquè les dues peces es vegin com un
   sol camp. */

.camp-amb-prefix {
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: var(--paper);
    overflow: hidden;
    transition: border-color 0.15s ease;
}
.camp-amb-prefix:focus-within { border-color: var(--brand-light); background: white; }

.camp-prefix {
    display: flex;
    align-items: center;
    padding: 0 13px;
    border-right: 1.5px solid var(--border);
    background: var(--success-bg);
    color: var(--brand-dark);
    font-weight: 600;
    white-space: nowrap;
    user-select: none;
}

/* La casella de dins ja no porta vora ni fons seus: els posa la capsa */
form .camp-amb-prefix input {
    flex: 1;
    min-width: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}
form .camp-amb-prefix input:focus { background: transparent; }

/* Si es deixa en blanc, s'ha d'encendre tota la capsa i no només la casella */
form .camp-amb-prefix input.camp-invalid,
form .camp-amb-prefix input.camp-invalid:focus { background: var(--danger-bg); }
.camp-amb-prefix:has(.camp-invalid) {
    border-color: var(--danger);
    background: var(--danger-bg);
}
.camp-amb-prefix:has(.camp-invalid) .camp-prefix {
    border-right-color: var(--danger);
    background: var(--danger-bg);
    color: var(--danger);
}

/* Camp obligatori que s'ha deixat en blanc (el marca assets/validacio.js) */
form .camp-invalid,
form .camp-invalid:focus {
    border-color: var(--danger);
    background: var(--danger-bg);
}

.error-camp {
    margin: 6px 0 0;
    color: var(--danger);
    font-size: 0.85rem;
    font-weight: 600;
}

.avis-validacio { margin-top: 4px; }

/* ---------- Botons ---------- */

/* El criteri de tot el portal: el color diu quina mena de cosa fa el botó, no
   res més (mida, posició...). Només hi ha verd, vermell i gris —cap color nou,
   perquè cap no lliga amb el verd de marca— i la icona hi va a un costat o
   altre segons si el botó FA alguna cosa o només hi porta:
     - verd ple (.btn)              -> l'acció principal d'aquella pantalla,
       pop-up o fila. Icona al DAVANT del text.
     - verd amb contorn (.icon-btn) -> una acció entre altres. Icona al DAVANT.
     - vermell (.btn-danger ple / .btn-contorn-perill contorn)
                                     -> destrueix o desfà. Icona al DAVANT.
     - et porta a un altre lloc     -> la mateixa pastilla amb contorn que una
       acció (.icon-btn), però amb una fletxa en comptes de la icona al
       davant: és l'única cosa que el distingeix d'un cop d'ull d'una acció
       normal, no fa falta cap color nou. La direcció de la fletxa diu cap on
       vas, i la posició acompanya la direcció:
         · cap a un lloc nou -> icona 'fletxa' (dreta), DESPRÉS del <span>
         · torna enrere      -> icona 'fletxa_enrere' (esquerra), ABANS del <span>
     - gris (.btn-secondary)        -> cancel·lar / tancar, sempre a l'esquerra
       del peu. Sense icona: han de cridar menys, no més.
*/

/* `display: inline-block` guanya a la regla del navegador per a [hidden]: sense
   això, un botó amagat des del JavaScript es continua veient. */
.btn[hidden] { display: none; }

/* La vora transparent hi és perquè totes les variants facin exactament la
   mateixa alçada: les que en porten de debò (.btn-contorn, .btn-desactivat)
   ocupaven 3 px més i desalineaven la fila de botons. Així el coixinet és el
   mateix per a totes i no s'ha de compensar variant per variant: qualsevol .btn
   fa 46 px, i amb .btn-sm, 35, que són els mateixos que fa .icon-btn. */
.btn {
    display: inline-block;
    background: var(--brand-dark);
    color: white;
    border: 1.5px solid transparent;
    padding: 10px 18.5px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
    text-decoration: none;
    margin-top: 18px;
    transition: background 0.15s ease, transform 0.1s ease;
}
.btn:hover { background: var(--brand-dark-hover); }
.btn:active { transform: translateY(1px); }
/* Un .btn ple que no es pot prémer (p. ex. "Veure inscripció" sense full
   encara): esvaït com .icon-btn[disabled], que és el mateix cas però amb
   contorn. Abans només calia dins d'un pop-up (.modal-accions); ara que
   "Veure inscripció" pot sortir desactivat fora de cap modal, cal en general. */
.btn[disabled] { opacity: 0.55; cursor: default; }
.btn[disabled]:hover { background: var(--brand-dark); }

.btn-secondary { background: var(--muted); }
.btn-secondary:hover { background: #47534a; }
/* Per a l'acció de segona fila: es veu de lluny que és un botó, però buit
   per dins no li pren el protagonisme al principal, que va massís. */
.btn-contorn {
    background: transparent;
    color: var(--brand-dark);
    border-color: var(--border);
}
.btn-contorn:hover { background: var(--success-bg); border-color: var(--brand-light); }
/* Tancar la sessió: contorn, que no és l'acció principal de la pàgina, però
   en vermell, perquè es vegi de seguida que et treu de dins. */
.btn-contorn-perill {
    color: var(--danger);
    border-color: var(--danger);
}
.btn-contorn-perill:hover { background: var(--danger-bg); border-color: var(--danger); }
.btn-danger { background: var(--danger); }
.btn-danger:hover { background: #96271e; }

/* Una acció que ara no es pot fer. No és un botó desactivat de debò: s'ha de
   poder prémer, perquè el que fa és explicar per què no es pot. */
.btn-desactivat {
    background: var(--paper);
    color: var(--muted);
    border-color: var(--border);
    cursor: not-allowed;
}
.btn-desactivat:hover { background: var(--border); }

/* ---------- Avisos ---------- */

.alert {
    padding: 13px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 0.95rem;
}
.alert-error { background: var(--danger-bg); color: var(--danger); }
.alert-success { background: var(--success-bg); color: var(--success); }
.alert-avis { background: var(--warning-bg); color: var(--warning-ink); }
.alert code { background: rgba(0, 0, 0, 0.06); padding: 1px 5px; border-radius: 5px; }

/* ---------- Avisos volants ---------- */
/* El que acabes de fer, dit sense moure la pàgina: flota a dalt de tot, per
   sobre de la barra, i se'n va sol als deu segons (assets/volants.js). Com que
   va en position:fixed no ocupa lloc enlloc, i per tant no desplaça res del que
   miraves. Qui els pinta és includes/nucli/volants.php. */

.volants {
    position: fixed;
    /* El `top` de debò el posa assets/volants.js, mesurant l'alçada real de
       .site-header (amb els paddings) perquè el volant no li caigui a sobre i
       tapi el menú (Famílies / Infants / Pagaments...) just quan acabes de
       desar. No hi val cap número fix aquí: la capçalera fa una alçada
       diferent a cada pàgina (un bloc més o menys) i encara més a mòbil, on
       flex-wrap la fa créixer. Aquest 14px és només el que es veia abans de
       tenir JavaScript per mesurar-ho de debò. */
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;          /* per sobre dels pop-ups, que van a 50 */
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(460px, calc(100vw - 24px));
    /* El contenidor ocupa tota l'amplada però no ha de robar cap clic: només
       els volants de dins en reben. */
    pointer-events: none;
}

.volant {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 12px 12px 16px;
    border-radius: 16px;
    border: 1px solid transparent;
    box-shadow: 0 10px 30px rgba(22, 36, 26, 0.18);
    font-size: 0.93rem;
    line-height: 1.45;
    animation: volant-entra 0.22s ease-out both;
}

.volant-success { background: var(--success-bg); border-color: #bfe0b4; color: var(--success); }
.volant-error   { background: var(--danger-bg);  border-color: #f1c8c1; color: var(--danger); }
.volant-avis    { background: var(--warning-bg); border-color: #ecd9a4; color: var(--warning-ink); }
/* Els aniversaris d'avui (includes/panell/aniversaris.php): no és cap resposta
   al que acabes de fer, per això va en blanc i no amb els colors de dalt. No
   marxa sol; si en fa anys molta gent, la llista fa scroll i el volant no tapa
   la pàgina sencera. */
.volant-aniversari { background: var(--card); border-color: var(--border); color: var(--ink); }
.volant-aniversari > svg { flex: none; margin-top: 2px; color: var(--brand-dark); }
.volant-aniversari .volant-text { max-height: 40vh; overflow-y: auto; }
.volant-aniversari-titol { margin: 0 0 2px; font-weight: 700; color: var(--brand-dark); }
.volant-aniversari-llista { margin: 0; padding: 0; list-style: none; }
/* «Carregant…» (assets/carregant.js): surt quan un clic triga a tenir
   resposta, i se'n va quan arriba la pàgina. En blanc, com els aniversaris:
   no és cap resultat, només diu que s'hi està treballant. */
.volant-carregant { align-items: center; background: var(--card); border-color: var(--border); color: var(--ink); }
.volant-carregant .roda {
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 3px solid var(--border);
    border-top-color: var(--brand-dark);
    animation: roda-gira 0.8s linear infinite;
}
@keyframes roda-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .volant-carregant .roda { animation-duration: 2.4s; }
}
/* Neix amagat: l'obre i el tanca el botó del pastís del panell, i la creu només
   l'amaga (assets/volants.js). Tots dos porten display propi, que guanyaria a hidden. */
.volant[hidden], [data-mostra-volant][hidden] { display: none; }

/* El pastís del panell d'entrada, al costat de «Portal obert». El numeret de
   quants fan anys avui penja de la cantonada, com el d'una app, perquè faci
   ganes de prémer-lo; un cop premut, aquell dia ja no hi torna. */
.boto-aniversaris {
    position: relative;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
}
.boto-comptador {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border: 2px solid var(--paper);
    border-radius: 10px;
    background: var(--danger);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.volant-text { flex: 1; min-width: 0; }

.volant-tanca {
    flex: 0 0 auto;
    margin: -1px -2px 0 0;
    padding: 3px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: inherit;
    opacity: 0.6;
    line-height: 0;
    cursor: pointer;
}
.volant-tanca:hover { opacity: 1; background: rgba(0, 0, 0, 0.08); }
.volant-tanca:focus-visible { opacity: 1; outline: 2px solid currentColor; outline-offset: 1px; }

@keyframes volant-entra {
    from { opacity: 0; transform: translateY(-14px); }
}

.volant-marxa {
    animation: none;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.25s ease-in, transform 0.25s ease-in;
}

@media (max-width: 560px) {
    .volants { top: 10px; width: calc(100vw - 20px); }
}

@media (prefers-reduced-motion: reduce) {
    .volant, .volant-marxa { animation: none; transition: none; }
}

@media print {
    .volants { display: none; }
}

/* ---------- Mentre la pàgina es repinta sola ----------
   Les pàgines que es canvien sense recarregar-se (assets/viu.js) no tenen la
   barra de càrrega del navegador, i entre que es prem el botó i el canvi es
   veu hi ha un moment mort. Un fil que corre a dalt de tot i el cursor de
   rellotge: prou per saber que s'està fent, i prou poc per no distreure. */

body.viu-carregant { cursor: progress; }

body.viu-carregant::before {
    content: "";
    position: fixed;
    top: 0;   /* no «inset»: fins a l'iOS 14.5 no el coneix */
    left: 0;
    z-index: 300;   /* per sobre dels pop-ups (50) i dels volants (200) */
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg,
        transparent 0%, var(--brand-light) 45%, var(--brand-light) 55%, transparent 100%);
    background-size: 40% 100%;
    background-repeat: no-repeat;
    animation: viu-fil 0.9s linear infinite;
}

@keyframes viu-fil {
    from { background-position: -40% 0; }
    to   { background-position: 140% 0; }
}

@media (prefers-reduced-motion: reduce) {
    body.viu-carregant::before { animation: none; background-position: 30% 0; }
}

/* ---------- Taules ---------- */

table { width: 100%; border-collapse: collapse; margin-top: 12px; }
/* Títol i contingut de cada columna, centrats: amb el títol a l'esquerra i
   el contingut de cada fila a la seva manera (botons a la dreta, números al
   mig) les columnes no es llegien com a columnes. Queden a l'esquerra només
   les taules que no són llistats: el recompte clau–valor de la configuració,
   els editors del full i els textos legals (més avall). A les fitxes del mòbil
   (.taula-fitxes, fins a 640 px) tot torna a l'esquerra, al costat de
   l'etiqueta. */
th, td { text-align: center; padding: 11px 10px; border-bottom: 1px solid var(--border); }
.taula-recompte td,
.taula-opcions th, .taula-opcions td,
.taula-tria th, .taula-tria td,
.text-legal th, .text-legal td { text-align: left; }

/* El que dins d'una cel·la va en fila (botons, insígnies, xips, la foto amb
   el nom) també es centra, que si no el text anava al mig i els botons no */
td .accions-fila,
td .cel-badges,
td .cel-fills,
td .cel-inscripcions,
td .cel-infant,
td .pagament-accio { justify-content: center; }
td .cel-convit { align-items: center; }
td .cel-infant-text { text-align: left; }
th {
    color: var(--muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
}

/* ---------- Insígnies d'estat ---------- */

.badge {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}
.badge-pendent { background: var(--warning-bg); color: var(--warning-ink); }
.badge-pagat, .badge-confirmada { background: var(--success-bg); color: var(--success); }
.badge-cancel_lada { background: var(--danger-bg); color: var(--danger); }
/* Una família donada de baixa: ni bé ni malament, només que ja no hi és */
.badge-baixa { background: var(--paper); color: var(--muted); border: 1px solid var(--border); }

/* L'avís de dalt de la fitxa d'una família de baixa: el text i, a la seva
   dreta, el botó que la torna a donar d'alta */
.avis-baixa { display: flex; align-items: center; justify-content: space-between;
              gap: 10px 16px; flex-wrap: wrap; }
.avis-baixa p { margin: 0; flex: 1 1 280px; }
.avis-baixa form { margin: 0; }

/* La MENA d'activitat (curs, activitat d'estiu, casal) no és cap estat: va
   d'un blau propi, fora del verd-groc-vermell-gris amb què es diu si està
   oberta, si obre més endavant, si s'ha tancat o si encara és oculta. */
.badge-mena { background: var(--mena-bg); color: var(--mena-ink); }

/* Les menes d'avís de /admin/avisos. Van juntes a la mateixa taula i la
   pastilla és l'única cosa que les separa: la blava surt sola de les dades i no
   es pot treure, la verda plena l'ha penjada algú. (La tercera, la del suggerit
   que encara no és cap avís, és més avall amb la ratlla que els separa.) */
.badge-automatic { background: var(--mena-bg); color: var(--mena-ink); }
.badge-manual { background: var(--brand-pale); color: var(--brand-dark); }

/* Una activitat oberta on encara no s'hi han apuntat: ni bé ni malament */
.badge-obert {
    background: var(--paper);
    color: var(--muted);
    border: 1px dashed var(--border);
}

/* ---------- Grups de l'esplai (color propi de cada grup) ----------
   El color arriba per variables CSS des de grup_estil() (includes/panell/grups.php),
   així els colors viuen en un sol lloc del projecte. */

.badge-grup {
    background: var(--g-pale);
    color: var(--g-fosc);
    border: 1px solid var(--g-color);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
/* L'infant que no està apuntat enlloc: no és cap error, però convé veure-ho */
.badge-sense-activitats {
    background: var(--warning-bg);
    color: var(--warning-ink);
    /* En dues ratlles fa nosa: que la columna cedeixi l'amplada, no el text */
    white-space: nowrap;
}

/* La porta de les famílies, al costat del selector del panell: verd si el
   portal és obert i vermell si és tancat (includes/nucli/tancat.php). Només ho diu:
   obrir-la i tancar-la es fa a la configuració, amb la confirmació al davant. */
.badge-portal {
    letter-spacing: 0.04em;
    border: 1px solid transparent;
    white-space: nowrap;
}
.badge-portal-obert { background: var(--success-bg); color: var(--success); border-color: var(--success); }
.badge-portal-tancat { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }

.badge-sense-grup {
    background: var(--paper);
    color: var(--muted);
    border: 1px dashed var(--border);
}

.punt-grup {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--g-color);
    flex: 0 0 auto;
}

.chip-compte {
    font-weight: 700;
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
}
/* Mentre es cerca, els números que no quadrarien amb la taula se'n van */
.chip-compte[hidden] { display: none; }

/* Nom de l'infant al llistat: inicials rodones a l'esquerra */
.cel-infant {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cel-infant .child-foto { width: 36px; height: 36px; }
.cel-infant .child-inicials { font-size: 0.85rem; }

/* Nom a dalt (text pla) i família a sota (aquesta sí que és enllaç) */
.cel-infant-text { min-width: 0; line-height: 1.3; }
.cel-infant-nom {
    display: block;
    font-weight: 600;
    color: var(--ink);
}
.cel-infant-text a { font-size: 0.85rem; }
/* Infants: la foto una mica més gran, i el nom amb prou amplada perquè
   nom i dos cognoms no facin tres línies («Adrian / Adachi / Chlebda»): la
   taula donava l'espai a les al·lèrgies i escanyava aquesta columna. Només
   en taula: en fitxa (fins a 640 px) el nom ja té tota l'amplada. */
#taula-infants .cel-infant .child-foto { width: 44px; height: 44px; }
#taula-infants .cel-infant .child-inicials { font-size: 0.95rem; }
@media (min-width: 641px) {
    #taula-infants .cel-infant-text { min-width: 11rem; }
}
/* Naixement: la data i, a sota, els anys, centrats a la columna */
.cel-naixement { white-space: nowrap; }
.cel-naixement-anys { display: block; color: var(--muted); }
/* Inscripcions (Infants): quantes en té i, al costat, el botó per veure-les.
   Al mòbil el botó s'estira com els de les altres targetes. */
.cel-inscripcions { display: flex; align-items: center; gap: 10px; }
.cel-inscripcions-compte {
    min-width: 1.5em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.cel-inscripcions > .accions-fila { flex: 1 1 auto; }

/* Insígnies del grup dins la cel·la de la taula */
.cel-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Camps que la família encara no ha completat */
.sense-dada { color: var(--muted); font-style: italic; }

/* Columnes de recompte: el número al mig de la seva columna, capçalera inclosa */
th.cel-centre, td.cel-centre { text-align: center; }
/* El nom (d'una activitat, d'una família) es llegeix millor arrenglerat */
th.cel-esquerra, td.cel-esquerra { text-align: left; }

/* Els fills d'una família dins la seva fila: el nom amb el color del grup, tots
   en una línia si hi caben. Són xips petits perquè la fila no s'enfili. */
.cel-fills {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
}
.xip-fill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px 2px 7px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    background: var(--g-pale, var(--paper));
    color: var(--g-fosc, var(--muted));
    border: 1px solid var(--g-color, var(--border));
}
.xip-fill .punt-grup { width: 7px; height: 7px; background: var(--g-color, var(--muted)); }

/* El que a l'ordinador és al title (els cognoms d'un infant, la data d'una
   baixa): a la fitxa del mòbil, que no té ratolí, s'escriu. A l'ordinador
   s'amaga com .visualment-amagat, o sigui que el lector de pantalla també
   el llegeix. */
.detall-mobil {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}
@media (max-width: 640px) {
    .detall-mobil {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
        clip-path: none;
    }
}

/* El guionet de les cel·les sense res */
.cel-buida { color: var(--muted); }

/* El nom de la família necessita aire; els fills, en canvi, van amb xips curts
   i no cal que s'enduguin mitja taula. Amb l'amplada automàtica el navegador
   reparteix segons el contingut i no fa cas dels percentatges: per això aquesta
   taula (i només aquesta) va amb table-layout fix. */
#taula-families { table-layout: fixed; min-width: 760px; }
.col-familia { width: 22%; }
.col-contacte { width: 25%; word-break: break-word; }
.col-fills { width: 17%; }
.col-numero { width: 12%; }
.col-accions { width: 12%; }
/* «No inscrits» d'una activitat: el convit ocupa el lloc de les dues columnes
   de números (12% + 12%). El distintiu de la data pot partir-se en dues ratlles. */
.col-convit { width: 24%; }
.cel-convit { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cel-convit .badge { white-space: normal; }
.cel-convit form { margin: 0; }

/* La fila sencera duu a la fitxa: convé que es vegi quina es té a sota */
#taula-families tbody tr[data-href] { cursor: pointer; }
#taula-families tbody tr:hover { background: var(--paper); }

/* En pantalla estreta la taula llisca de costat en comptes d'estrènyer-se. Les
   inscripcions són el que menys es mira des d'aquí (i són a la fitxa), així que
   són les primeres a plegar. */
@media (max-width: 760px) {
    #taula-families { min-width: 640px; }
    .col-inscripcions { display: none; }
}

/* Els dos correus del compte es llegeixen igual: el segon només és més apagat */
.correu-enllac { color: inherit; text-decoration: none; }
.correu-enllac:hover { text-decoration: underline; }
.correu-segon { display: block; color: var(--muted); }

/* Quan la llista s'ha hagut de tallar: es diu, no s'amaga */
.avis-tall {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 0.85rem;
}

/* ---------- Targeta de fill/a ---------- */

.child-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin-bottom: 14px;
    background: linear-gradient(180deg, rgba(110,181,89,0.05), transparent 60px);
}

/* Capçalera: foto a l'esquerra, nom i grup al mig, botons a la dreta */
.child-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Espai reservat per a la cara del fill/a; de moment hi surten les inicials */
.child-foto {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--brand-pale);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
}
.child-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.child-inicials {
    font-weight: 700;
    font-size: 1rem;
    color: var(--brand-dark);
    letter-spacing: 0.5px;
}

/* ---------- Posar-hi la foto (fitxa del fill/a) ---------- */

/* El cercle és el botó, però el cercle SOL no ho semblava: unes inicials dins
   d'una rodona es llegeixen com una decoració i la meitat de les famílies no
   hi arribaven a clicar mai. Per això el conjunt va arrambat a la dreta de la
   capçalera, amb el botó escrit primer i el cercle al seu costat: mentre no hi
   ha foto, el cercle porta el marc de ratlles i una càmera a dins, i així ja no
   és una rodona sinó un forat per omplir. Un cop hi ha la foto, el botó passa a
   ser de contorn i el marc de ratlles desapareix. No hi va res més: només el
   botó i la foto, centrats l'un amb l'altre. */
.child-foto-edit {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;   /* el botó, centrat amb el cercle */
    gap: 12px;
    margin-left: auto;     /* arrambla el conjunt a la dreta de la capçalera */
}
.child-foto-boto {
    margin-top: 0;
    white-space: nowrap;
}
.child-foto-tria {
    position: relative;
    display: block;
    cursor: pointer;
    border-radius: 50%;
}
.child-foto-tria .child-foto { width: 76px; height: 76px; }
.child-foto-tria .child-inicials { font-size: 1.4rem; }

/* Sense foto: marc de ratlles i la càmera a sobre de les inicials, que queden
   de fons. El conjunt ha de dir «aquí hi falta alguna cosa». */
.child-foto-tria .child-foto-buida {
    border: 2px dashed var(--brand-light);
    background: var(--card);
}
.child-foto-tria .child-foto-buida .child-inicials { opacity: 0.35; }
.child-foto-camera {
    position: absolute;
    top: 0;   /* no «inset»: fins a l'iOS 14.5 no el coneix */
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    line-height: 1;
    pointer-events: none;
}
.child-foto-tria:hover .child-foto-buida { border-color: var(--brand-dark); }

/* El rètol viu a la meitat de baix del cercle. Sempre visible: si només sortís
   en passar-hi el ratolí, al mòbil no se sabria mai que s'hi pot clicar. */
.child-foto-capa {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2px 0 3px;
    font-size: 0.6rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #fff;
    background: rgba(22, 36, 26, 0.62);
}
.child-foto-tria:hover .child-foto-capa { background: rgba(22, 36, 26, 0.78); }
.child-foto-tria:focus-within .child-foto {
    outline: 2px solid var(--brand-dark);
    outline-offset: 2px;
}

/* Per als camps que hi ha de ser però no s'han de veure (el selector de
   fitxers de la foto): amagats sense sortir del recorregut del teclat. */
.visualment-amagat {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.child-titol { flex: 1 1 auto; min-width: 0; }
.child-nom {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.3;
}
.child-sota-nom {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 3px;
}

/* Els tres botons en fila i només amb la icona: la fila de la taula queda
   d'una sola alçada. El text hi és igualment, per als lectors de pantalla. */
.accions-icones { gap: 6px; }
.accions-icones .icon-btn,
.accions-icones .btn {
    width: 34px;
    height: 34px;
    padding: 0;
    justify-content: center;
}
.accions-icones form { margin: 0; }

/* Text que només llegeixen els lectors de pantalla */
.nomes-lectors {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Els tres botons, un sota l'altre i tots de la mateixa amplada */
.accions-verticals {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}
.accions-verticals .icon-btn,
.accions-verticals .btn { width: 100%; justify-content: center; text-align: center; }
.accions-verticals form { width: 100%; }

/* Quan un fill/a no té res a la taula: ni activitat oberta ni cap inscripció */
.child-sense-res {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 0.9rem;
}

/* A la fitxa de família la columna de botons va arrapada a la dreta. L'amplada
   és fixa: si no, cada targeta se la feia a la seva i els botons ballaven. */
.child-accions { flex: 0 0 auto; margin-left: auto; }
.child-accions.accions-verticals { width: 168px; }

/* La data de naixement, al costat de la insígnia del grup */
.child-naixement { color: var(--muted); font-size: 0.85rem; }

/* A quines activitats està apuntat, en quin punt és cadascuna i on se'n mira
   el full. Una línia per inscripció, prou curta per no fer créixer la targeta. */
.ins-llista {
    list-style: none;
    margin: 12px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid var(--border);
}
.ins-llista > li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 5px 0;
    font-size: 0.92rem;
}
.ins-activitat { font-weight: 600; }
.ins-llista .ins-veure { margin-left: auto; }
.ins-llista .icon-btn { padding: 3px 8px; font-size: 0.85rem; }

@media (max-width: 640px) {
    .child-head { flex-wrap: wrap; }
    .child-accions {
        margin-left: 0;
        width: 100%;
        white-space: normal;
    }
}

/* ---------- Pàgines d'accés (login / magic link) ---------- */

/* El <main> porta 20px de coixí a dalt i, sense treure'ls, entre el verd de la
   capçalera i el degradat hi quedava una franja de paper pla. Va amb «main >»
   perquè «main > :first-child { margin-top: 0 }» guanya per especificitat. */
main > .auth-wrapper {
    margin-top: -20px;
}

.auth-wrapper {
    /* Alçada lliure = finestra menys capçalera (63) + padding del main (72+60) + peu (112) */
    min-height: calc(100vh - 307px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background:
        radial-gradient(circle at 50% 0%, rgba(110,181,89,0.16), transparent 60%),
        var(--paper);
}

.auth-card {
    position: relative;
    /* Prou ampla perquè el text d'entrada hi càpiga en dues línies i els dos
       botons hi vagin de costat sense encavallar-se. */
    max-width: 520px;
    width: 100%;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 36px 32px;
    box-shadow: 0 8px 28px rgba(20,99,47,0.10);
    text-align: center;
    overflow: hidden;
}

.auth-watermark {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 220px;
    height: 220px;
    opacity: 0.05;
    pointer-events: none;
}

.auth-card form .btn {
    display: block;
    margin-left: auto;
}

/* Els dos botons dels formularis d'accés: el secundari a l'esquerra (tornar
   enrere, o «ja tinc un codi») i el principal a la dreta, on hi va la mà. */
.auth-accions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}
.auth-card form .auth-accions .btn { margin: 0; }
/* Al mòbil no hi caben de costat sense partir-se en dues línies: el botó
   d'enviar, que és el que fa gairebé tothom, va a dalt i sencer, i «Ja tinc
   un codi» a sota. */
@media (max-width: 480px) {
    .auth-accions { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
    .auth-accions .btn { width: 100%; text-align: center; }
}

/* La casella de recordar el dispositiu, a la pantalla del correu.
   És un <label> sencer, no pas la casella sola: al mòbil el quadradet de 20px
   és massa petit per encertar-lo amb el dit, i així s'hi pot clicar a sobre
   del text sense necessitat de dibuixar-hi cap requadre.

   Va apagada mentre no es marca, com les files de /preferencies: el que la
   família ha de mirar d'aquesta pantalla és el camp del correu i el botó, i
   una casella encesa que ningú ha tocat s'enduria l'atenció que no li toca. */
.auth-recorda {
    /* inline-flex, no flex: la zona clicable arriba fins on acaba el text.
       El max-width és per si el text s'ha de partir en dues
       ratlles a les pantalles estretes. */
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 10px;
    margin: 18px 0 0;
    padding: 0;
    border: 0;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}
.auth-recorda:hover { color: var(--brand-dark); }
.auth-recorda:has(input:checked) {
    color: var(--brand-dark);
}
/* El marc del focus ha de ser el del bloc, no el del quadradet de dins: qui hi
   arriba amb el tabulador ha de veure encesa tota la zona que pot prémer. */
.auth-recorda:focus-within {
    outline: 2px solid var(--brand-dark);
    outline-offset: 2px;
}

.auth-recorda input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0;
    flex: 0 0 auto;
    cursor: pointer;
    accent-color: var(--brand-dark);
}
.auth-recorda input[type="checkbox"]:focus-visible { outline: none; }

.auth-recorda-nom {
    display: block;
    min-width: 0;
    font-weight: 600;
    font-size: 0.95rem;
}
.auth-recorda:not(:has(input:checked)) .auth-recorda-nom { opacity: 0.75; }

/* El logo de l'esplai, a sobre del títol de la targeta d'accés. Va centrat i
   amb el títol tocant-hi de sota: els dos han de llegir-se com una sola cosa,
   que és qui hi ha darrere del portal. */
.auth-logo {
    display: block;
    width: 120px;
    height: 120px;
    margin: 0 auto 14px;
    /* El fitxer ja porta el verd de la capçalera (#14632f). */
    object-fit: contain;
}

.auth-card h1 {
    margin-top: 8px;
}

.auth-card form {
    text-align: left;
}

/* L'avís del portal tancat (/avis). És la mateixa targeta, però com que hi ha
   una carta a dins i no pas un formulari, va una mica més ampla i el text
   alineat a l'esquerra, que és com es llegeix una carta. */
.auth-card-avis {
    max-width: 560px;
    text-align: left;
}
/* Mirant l'avís amb el portal obert (només l'equip): el rètol va damunt de la
   targeta i no pas al seu costat, i per això el bloc passa a columna. */
.auth-wrapper-prova { flex-direction: column; }
.avis-prova {
    width: 100%;
    max-width: 560px;
    margin: 0 0 18px;
}
.auth-card-avis h1 {
    text-align: center;
    margin-bottom: 20px;
}
.avis-carta p {
    margin: 0 0 14px;
}
.avis-carta p:last-child {
    margin-bottom: 0;
    color: var(--muted);
}
.avis-peu {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.9rem;
}
.avis-equip {
    margin: 10px 0 0;
    text-align: center;
    font-size: 0.82rem;
}
.avis-equip a {
    color: var(--muted);
    text-decoration: none;
}
.avis-equip a:hover {
    text-decoration: underline;
}

/* La pàgina d'error (/error). És la mateixa targeta de sempre, centrada com la
   del login: el que hi ha a dins és un missatge curt i dos camins per sortir-ne,
   i tot plegat ha de cabre d'un cop d'ull sense fer rodar la pantalla. */
.auth-card-error {
    max-width: 500px;
}

/* El número, en petit i apagat a dalt de tot. Qui ha arribat aquí perdut no
   busca un «404» de pam i mig: el que ha de llegir és la frase de sota. El
   número hi és perquè, si ens ho ha d'explicar, ens ho pugui dir. */
.error-codi {
    display: inline-block;
    margin: 0 0 14px;
    padding: 3px 14px;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.auth-card-error h1 {
    margin: 0 0 10px;
    font-size: 1.35rem;
}

.error-text {
    margin: 0;
    color: var(--muted);
}

/* L'adreça que s'ha demanat, tal com ha arribat. En lletra d'amplada fixa
   perquè s'hi vegi la lletra que balla, i partida on faci falta: pel camí hi pot
   venir una cadena llarguíssima sense cap espai i desmuntaria la targeta. */
.error-adreca {
    margin: 18px 0 0;
    padding: 10px 12px;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    word-break: break-all;
}

/* Els dos camins per sortir-ne, de costat. El marge de dalt ja el posa .btn;
   aquí només es reparteixen. Al mòbil el flex-wrap els posa un sota l'altre. */
.error-accions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

@media (max-width: 600px) {
    .site-header .container { justify-content: center; text-align: center; }
    .site-header nav { justify-content: center; }
    /* En vertical no hi ha costats: cada bloc va a la seva línia, centrat. */
    .site-header .header-esquerra { flex-basis: 100%; justify-content: center; }
    /* Al mòbil la capçalera fa dues línies i el càlcul de sobre es queda curt:
       la targeta ja ocupa gairebé tota la pantalla, no cal centrar-la a pols. */
    .auth-wrapper { min-height: 0; }
}

/* ---------- Títol de pàgina: la icona de la pestanya i el nom ---------- */

/* La icona diu de quina pestanya és i el nom què s'hi mira. Per on se'n surt
   ho diuen la barra de dalt (les pestanyes) i la molla (la fondària): aquí no
   hi va cap fletxa que ho repeteixi. */
.titol-pagina {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.titol-pagina h1 {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin: 0;
}

/* La icona no encongeix mai i va del color del títol, com a la barra de dalt */
.titol-pagina h1 svg { flex: none; color: var(--brand-dark); }

/* ---------- Capçalera de pàgina amb acció a la dreta ---------- */

.page-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

/* A la dreta del títol hi pot anar més d'una cosa: el desplegable d'activitat
   i el botó d'afegir */
.page-head-accions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ---------- Selector de l'activitat que es mira ----------
   El botó que diu quina es mira i, al seu costat, el de gestionar-les, que és
   per on s'entra a /admin/activitats des que no surt a la barra de dalt.
   El desplegable és un <details>: s'obre sense JavaScript i, en obrir-se,
   s'hi veuen totes les activitats d'una tirada (includes/panell/tria_activitat.php). */

.tria-desplegable { position: relative; }
.tria-desplegable > summary { list-style: none; }
.tria-desplegable > summary::-webkit-details-marker { display: none; }

.tria-boto-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tria-llista {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    right: 0;
    min-width: 300px;
    max-width: 380px;
    /* Si n'hi ha moltes, que el menú no arribi a sortir de la pantalla */
    max-height: 60vh;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: 0 10px 28px rgba(22, 36, 26, 0.14);
}

/* Una sola línia per activitat: el nom i, arrapada a la dreta, la insígnia.
   Com més curta és la línia, més activitats caben d'un cop d'ull. */
.tria-opcio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 10px;
    border-radius: 9px;
    text-decoration: none;
    color: var(--ink);
}
.tria-opcio:hover { background: var(--paper); }
/* La triada, de fons neutre: amb el verd clar de fons la insígnia «Inscripcions
   obertes» (verd sobre verd) no es veia */
.tria-opcio.es-triada { background: var(--paper); }
.tria-opcio-nom {
    min-width: 0;
    font-size: 0.9rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tria-opcio.es-triada .tria-opcio-nom { color: var(--brand-dark); }
.tria-opcio .badge { flex: none; }

/* En pantalla estreta el menú ocupa tota l'amplada que té la capçalera */
@media (max-width: 560px) {
    .tria-desplegable { flex: 1 1 100%; }
    .tria-llista { left: 0; min-width: 0; max-width: none; }
}

.molla { margin: 0 0 10px; font-size: 0.9rem; }
.molla a { color: var(--muted); text-decoration: none; font-weight: 600; }
.molla a:first-child { display: inline-flex; align-items: center; gap: 4px; }
.molla a:first-child svg { flex: none; }
.molla a:hover { color: var(--brand-dark); }

/* ---------- Botons petits ---------- */

/* Les mides són les mateixes que les d'.icon-btn a propòsit: als llistats els
   dos botons van de costat a la mateixa fila i han de fer la mateixa alçada. */
.btn-sm {
    margin-top: 0;
    padding: 6px 12px;
    font-size: 0.85rem;
}

/* Botó amb icona a l'esquerra del text */
.btn-icona {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.accions-fila {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
}
.accions-fila form { margin: 0; }
.accions-fila .btn, .accions-fila .icon-btn { flex: 0 0 auto; }

/* Botó llapis: icona + text, discret fins que hi passes per sobre */
.icon-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: var(--card);
    color: var(--brand-dark);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.icon-btn:hover {
    background: var(--brand-pale);
    border-color: var(--brand-light);
}
.icon-btn[disabled] { opacity: 0.55; cursor: default; }
.icon-btn[disabled]:hover { background: var(--card); border-color: var(--border); }

button.icon-btn { font-family: inherit; }

/* Columna ACCIÓ d'/admin/pagaments: la fila de "Marcar pagat" porta a més un
   <select> de mètode al costat, que li menjava l'amplada i partia el text del
   botó en dos pisos ("Marcar" / "pagat"), mentre que "Marcar pendent" (sense
   select) hi cabia sencer. white-space:nowrap al botó fa que el text mai es
   trenqui (el mínim del botó passa a ser la seva amplada sencera); flex-wrap
   al formulari deixa que, si de debò no hi ha lloc, sigui el select qui baixi
   a una línia pròpia i el botó a la següent, en lloc de partir cap paraula. */
.pagament-accio {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.pagament-accio .icon-btn { white-space: nowrap; }
.pagament-metode { width: auto; padding: 6px; }

/* .icon-btn-veure (el verd pàl·lid de "Veure inscripció") ha desaparegut: amb
   el criteri nou "Veure inscripció" és l'acció principal de la fila i passa a
   verd PLE (.btn), o sigui que ja no calia cap variant de color a part. */

/* Mirant totes les activitats, un infant en pot tenir més d'una: l'ull s'obre
   llavors amb la llista, perquè es vegi de quin full es parla. */
.tria-full { position: relative; display: inline-block; }
.tria-full > summary {
    list-style: none;
    padding-right: 8px;
}
.tria-full > summary::-webkit-details-marker { display: none; }
.tria-full > summary::marker { content: ''; }
.tria-full[open] > summary { filter: brightness(0.97); }

.tria-full-menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    right: 0;
    min-width: 240px;
    max-width: 320px;
    padding: 6px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(20,99,47,0.16);
    white-space: normal;
}
.tria-full-titol {
    margin: 4px 8px 6px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
}
.tria-full-menu a,
.tria-full-menu .tria-full-buit {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--brand-dark);
}
.tria-full-menu a:hover { background: var(--brand-pale); }
/* La que no té full no és cap enllaç: el nom i, sota, per què no s'hi pot anar */
.tria-full-menu .tria-full-buit { color: var(--muted); font-weight: 500; flex-wrap: wrap; }
.tria-full-menu .tria-full-buit small {
    flex: 1 0 100%;
    margin-left: 23px;
    color: var(--muted);
    font-weight: 400;
}

/* Variant quadrada, només icona */
.icon-btn-quadrat { padding: 0 12px; }
.icon-btn-copiat {
    background: var(--success-bg);
    border-color: var(--success);
    color: var(--success);
}

/* ---------- Barra de cerca i filtres ---------- */

.toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.toolbar .input-cerca {
    flex: 1;
    min-width: 200px;
    width: auto;
    margin: 0;
}

.chips { display: flex; gap: 8px; flex-wrap: wrap; }

.chip {
    display: inline-block;
    padding: 5px 13px;
    border-radius: 999px;
    border: 1.5px solid var(--border);
    background: var(--paper);
    color: var(--muted);
    font-size: 0.83rem;
    font-weight: 600;
    text-decoration: none;
}
.chip:hover { border-color: var(--brand-light); color: var(--brand-dark); }
.chip-actiu {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: white;
}
/* Encès: el fons ja és fosc, i el color d'hover de .chip s'hi fondria */
.chip-actiu:hover { color: white; border-color: var(--brand-dark); }
/* La creu dels xips encesos que es treuen clicant-los (chip_creu_html()): del
   color del text. Els xips amb flex (grups, quadrats, tasques) ja la separen
   amb el gap; els altres («Sense grup»), amb marge. */
.chip-actiu > svg { flex: 0 0 auto; }
.chip-actiu:not(.chip-grup):not(.chip-quadrat):not(.chip-tasca) > svg {
    margin-left: 5px;
    vertical-align: -1px;
}

/* Xip d'un grup: porta el seu color tant si està triat com si no. Va després
   de .chip a posta, perquè si no el fons neutre d'aquell se'l menjaria. */
/* Apagat: el fons tenyit, el punt i la vora del color del grup.
   Triat: el color del grup a tot el xip. Així es veu de lluny quin està actiu. */
.chip-grup {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-color: var(--g-color);
    background: var(--g-pale);
    color: var(--muted);
}
.chip-grup .punt-grup { opacity: 0.75; }
.chip-grup:hover {
    border-color: var(--g-color);
    color: var(--g-fosc);
    filter: none;
}
.chip-grup:hover .punt-grup { opacity: 1; }
.chip-grup.chip-actiu {
    background: var(--g-color);
    border-color: var(--g-color);
    color: var(--g-text-actiu);
}
.chip-grup.chip-actiu:hover { color: var(--g-text-actiu); border-color: var(--g-color); }
.chip-grup.chip-actiu .punt-grup {
    background: var(--g-text-actiu);
    opacity: 0.85;
}

/* Els xips d'una fila de filtres */
.barra-chips {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}
.barra-chips .chips { flex: 1 1 auto; }
/* Monitors: «Afegir monitor/a» i «Editar fitxa», dins la targeta i just a
   sobre de la cerca (el recompte és a sota, a equip.css) */
.barra-monitors {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

/* El recompte d'un llistat (Famílies, Infants), a la dreta de la fila dels
   grups, just a sota de la cerca. Una primera vegada que hi va anar, quan
   sortia un xip de més (els «Indeterminats» de Famílies amb totes les
   activitats) baixava a una línia ell sol i obria un forat entre les files de
   filtres; es va passar a una línia pròpia sota la cerca, i aquesta deixava
   un espai buit entre la cerca i els grups. Ara els xips s'arronsen abans
   (base 0): són ells els que fan una segona línia, i el número es queda dalt
   a la dreta, a l'altura de la primera. */
.barra-amb-compte > .chips { flex: 1 1 0; }
.resultat-compte.compte-fila-xips {
    align-self: flex-start;
    display: flex;
    align-items: center;
    min-height: 30px;
    margin: 0 0 0 auto;
    white-space: nowrap;
}

.treu-filtres {
    color: var(--muted);
    font-size: 0.83rem;
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
}
.treu-filtres:hover { color: var(--brand-dark); }

/* ---------- L'estat (Famílies) ----------
   La segona fila de filtres, sota la dels grups i amb el nom a la mateixa
   amplada, perquè les dues es llegeixin com una sola família de filtres. Els
   xips són quadrats (els grups, rodons: se'n sumen uns quants; d'estat, només
   un). Inscrits | No inscrits van units en un selector de la mateixa alçada
   que els xips, amb l'opció triada arrodonida com ells. */
.barra-families > .chips-etiqueta,
.faceta-estat > .chips-etiqueta { flex: 0 0 48px; }
.faceta-estat {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.chip-quadrat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
}
/* Infants no té etiqueta «Grup» a la fila de dalt: la d'«Assegurança» no s'ha
   d'alinear amb res i fa l'amplada del seu text */
.faceta-asseguranca > .chips-etiqueta { flex: 0 0 auto; }
.segment-quadrat { padding: 2px; border-width: 1.5px; }
.segment-quadrat .segment-opcio { padding: 3px 11px; }
@media (max-width: 600px) {
    .barra-families > .chips-etiqueta,
    .faceta-estat > .chips-etiqueta { flex-basis: 100%; }
}

/* Un eix de filtre (grup o estat): l'etiqueta i la seva tira de xips, juntes
   perquè no es puguin separar en fer flex-wrap. */
.chips-eix { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; flex-wrap: wrap; }
.chips-eix .chips { flex: 1 1 auto; }
.chips-etiqueta {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex: 0 0 auto;
}

/* Els filtres d'estat de Famílies. No són xips, a posta: els xips són els
   grups, i l'estat s'ha de distingir d'un cop d'ull. */
.filtres-estat {
    display: flex;
    align-items: center;
    gap: 6px 14px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Inscrits / No inscrits: un selector de dues posicions dins d'una càpsula.
   Com que s'exclouen, van enganxats; clicar el que ja és triat el treu. */
.segment {
    display: inline-flex;
    padding: 2px;
    border-radius: 8px;
    background: var(--paper);
    border: 1px solid var(--border);
}
.segment-opcio {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 6px;
    color: var(--muted);
    font-size: 0.83rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.segment-opcio:hover { color: var(--brand-dark); background: var(--card); }
.segment-actiu,
.segment-actiu:hover {
    background: var(--brand-dark);
    color: white;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.resultat-compte {
    color: var(--muted);
    font-size: 0.85rem;
    margin: 14px 0 0;
}

.buit {
    color: var(--muted);
    text-align: center;
    padding: 26px 0;
}
/* Amb la llista buida de debò hi va també el botó per començar-la */
.buit p { margin: 0; }
.buit .btn { margin-top: 14px; }
/* L'adreça de l'esplai dins d'una frase: que ressalti i que no es parteixi */
.correu-en-text {
    font-weight: 600;
    white-space: nowrap;
}

/* ---------- Capçaleres de taula ordenables ---------- */

th a.sort {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}
th a.sort:hover { color: var(--brand-dark); }
th a.sort-actiu { color: var(--brand-dark); }
/* La de la columna que mana es veu; les altres, insinuades: diuen que s'hi pot
   clicar sense competir amb la que hi ha posada ara. */
.sort-fletxa { margin-left: 4px; }
th a.sort:not(.sort-actiu) .sort-fletxa { opacity: 0.35; }
th a.sort:hover .sort-fletxa { opacity: 1; }

.enllac-fort {
    color: var(--brand-dark);
    font-weight: 600;
    text-decoration: none;
}
.enllac-fort:hover { text-decoration: underline; }

/* Una acció que ha de semblar un enllaç i ser un botó: dins d'una cel·la
   atapeïda, un botó de debò pesa massa i trenca la fila. Botó i no <a> perquè
   el que fa no és anar enlloc (obre un pop-up), i el teclat ho ha de saber. */
.btn-enllac {
    padding: 0;
    margin-top: 2px;
    border: 0;
    background: none;
    color: var(--brand-dark);
    font: inherit;
    font-size: 0.82rem;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.btn-enllac:hover { text-decoration-thickness: 2px; }

/* Que el full signat i el que es cobra ja no diguin el mateix no és cap
   errada, però tampoc no és el cas normal: s'ha de veure sense cridar. */
.pagament-canviat { color: var(--warning-ink); }

.zona-perill { border-color: #f0d3cf; }

/* ---------- Amplada extra per a les pàgines amb taula ---------- */

.container-ample { max-width: 1140px; }

/* ---------- Modal (enllaç d'accés) ---------- */

body.sense-scroll { overflow: hidden; }

.modal-fons {
    position: fixed;
    top: 0;   /* no «inset»: fins a l'iOS 14.5 no el coneix */
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(22, 36, 26, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 50;
}
.modal-fons[hidden] { display: none; }

.modal {
    background: var(--card);
    border-radius: 16px;
    border: 1px solid var(--border);
    box-shadow: 0 14px 40px rgba(20, 99, 47, 0.22);
    padding: 26px;
    width: 100%;
    max-width: 520px;
}

.modal-familia {
    color: var(--muted);
    font-size: 0.9rem;
    margin: 0 0 14px;
}

/* Capçalera de pop-up amb una acció a la dreta del títol */
.modal-cap {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.modal-cap h2 { margin: 0; }
.modal-cap .modal-familia { margin: 4px 0 0; }
.modal-cap .btn,
.modal-cap .icon-btn { margin-top: 0; flex: 0 0 auto; }

/* Quan a la capçalera hi ha una acció i la creu, van juntes a la dreta */
.modal-cap-accions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* La creu de tancar: el mateix quadrat exacte a tots els pop-ups. Amb amplada
   i alçada iguals, i sense text a dins, el requadre queda quadrat de debò. */
.modal-tanca {
    width: 34px;
    height: 34px;
    padding: 0;
    justify-content: center;
    color: var(--muted);
}
.modal-tanca:hover { color: var(--brand-dark); }

.modal-link-fila {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.modal-link-fila input[type="text"] {
    flex: 1;
    min-width: 0;
    padding: 10px 13px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: var(--paper);
    color: var(--ink);
    font-family: monospace;
    font-size: 0.85rem;
}

.modal-estat {
    font-size: 0.88rem;
    color: var(--muted);
    margin: 10px 0 0;
    min-height: 1.3em;
}
.modal-estat-ok { color: var(--success); }
.modal-estat-error { color: var(--danger); }

.modal-accions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 18px;
}
.modal-accions .btn { margin-top: 0; }
/* Crear i cancel·lar prou grossos i separats per no clicar-ne un per l'altre */
.modal-accions-grans { gap: 14px; margin-top: 26px; }
.modal-accions-grans .btn { padding: 11px 24.5px; font-size: 1rem; }

.modal-accions .btn-dreta { margin-left: auto; }
/* Una acció que no és de la família de les altres (Eliminar, al pop-up
   d'editar un monitor/a) va sola a l'esquerra; les de sempre, a la dreta */
.modal-accions .btn-esquerra { margin-right: auto; }
.modal-accions .btn-esquerra ~ .btn-dreta { margin-left: 0; }
.modal-accions .btn[disabled] { opacity: 0.55; cursor: default; }

/* ---------- Pop-up de confirmar (includes/vistes/modal_confirma.php) ----------
   Estret a posta: una pregunta i dos botons no necessiten l'amplada d'un
   formulari, i que es vegi petit ja diu que és de pas, no una pantalla més. */
.modal-confirma { max-width: 420px; }
/* pre-line i no `white-space: normal`: la de la zona de perill (que llista
   noms, un per línia) ha de mantenir els salts que hi posa el JavaScript */
.modal-confirma-text { margin: 0; white-space: pre-line; }

/* Botó de desar sol al peu d'un formulari llarg (fora de pop-up): a la dreta,
   com .modal-accions .btn-dreta, però sense els germans d'un pop-up al costat.
   Neix al full d'inscripció (assets/inscripcio.css hi afegeix el cas del pas a
   pas), però com és una utilitat d'alineació —no té res a veure amb cap
   formulari en concret— viu aquí, al full que carrega tothom, perquè el panell
   també la faci servir sense haver de carregar inscripcio.css. */
.ins-final-boto { display: flex; justify-content: flex-end; }
/* Sense `inline-block`/`flex` explícit aquí, quan un JS amaga el botó amb
   `hidden`, `[hidden]` de l'estil intern del navegador té la mateixa
   especificitat que aquesta regla i hi guanya per ordre: el botó es veuria
   igualment. Mateix motiu que `.btn[hidden]` una mica més amunt. */
.ins-final-boto[hidden] { display: none; }

/* ---------- Camp de cerca amb creu per netejar ---------- */

.camp-cerca {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 200px;
}
.camp-cerca .input-cerca { width: 100%; padding-right: 48px; }
/* Amaguem la creu nativa: fem servir la nostra, amb més àrea de clic */
.camp-cerca .input-cerca::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.btn-netejar-cerca {
    position: absolute;
    right: 5px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--danger);
    cursor: pointer;
    transition: background 0.15s ease;
}
.btn-netejar-cerca:hover { background: var(--danger-bg); }
.btn-netejar-cerca[hidden] { display: none; }

/* ---------- Pop-up de família nova ---------- */

/* 100vh al mòbil és l'alçada amb la barra del navegador amagada: amb la barra
   a la vista (o el teclat obert) el final del pop-up quedava tapat. dvh és
   l'alçada que es veu de debò; qui no l'entén (l'iOS 12) es queda amb vh. */
.modal { max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto; }
/* En una pantalla baixa (el mòbil de costat) el pop-up comença a dalt: centrat,
   cada cop que el teclat s'obre o es tanca saltava amunt i avall */
@media (max-height: 500px) {
    .modal-fons { align-items: flex-start; }
}
.modal-ample { max-width: 620px; }
/* El de l'avís: prou ample perquè tots els grups d'una activitat hi càpiguen
   en una sola línia. */
.modal-ample.modal-avis { max-width: 820px; }
.modal-ajuda { color: var(--muted); font-size: 0.85rem; margin: 6px 0 0; }
.modal form .btn { margin-top: 0; }

/* ---------- Pop-up d'exportar la llista (admin/infants.php) ---------- */

.export-etiqueta {
    margin: 18px 0 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ink);
}

/* Excel o PDF: dues targetes l'una al costat de l'altra, i al mòbil apilades */
.export-formats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
@media (max-width: 520px) {
    .export-formats { grid-template-columns: 1fr; }
}

.export-format,
.export-bloc {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 11px 14px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--paper);
    cursor: pointer;
    font-weight: 400;
    margin: 0;          /* el `form label` general hi posa marge a dalt */
}
.export-format:hover,
.export-bloc:hover { border-color: var(--brand-light); }
.export-format:has(input:checked),
.export-bloc:has(input:checked) {
    border-color: var(--brand-dark);
    background: var(--success-bg);
}
/* Sense mida pròpia, la casella s'empassa el width:100% de `form input` */
.export-format input,
.export-bloc input {
    width: 17px;
    height: 17px;
    padding: 0;
    margin: 3px 0 0;
    flex: 0 0 auto;
    cursor: pointer;
    accent-color: var(--brand-dark);
}
.export-format small,
.export-bloc small {
    display: block;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.35;
}
.export-bloc small { display: inline; }

.export-blocs { display: grid; gap: 8px; }
.export-blocs + .export-blocs { margin-top: 8px; }
.export-blocs[hidden] { display: none; }

/* Els grups són xips com els del filtre, però amb una casella amagada a dins:
   triat, pren el color del grup sencer, igual que .chip-actiu */
.export-grup { position: relative; cursor: pointer; user-select: none; }
.export-grup input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.export-grup:has(input:focus-visible) { outline: 2px solid var(--brand-dark); outline-offset: 2px; }
.export-grup:not(.chip-grup):has(input:checked) {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: white;
}
.export-grup.chip-grup:has(input:checked) {
    background: var(--g-color);
    color: var(--g-text-actiu);
}
.export-grup.chip-grup:has(input:checked) .punt-grup {
    background: var(--g-text-actiu);
    opacity: 0.85;
}

/* ---------- L'assegurança dels infants (admin/infants.php) ----------
   Una rodoneta: verda si està assegurat, vermella si no. L'anella clara que
   l'envolta fa que es llegeixi com un senyal i no com una taca. */

.rodona-assegurat {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex: 0 0 auto;
    vertical-align: middle;
}
.rodona-si { background: var(--success); box-shadow: 0 0 0 3px var(--success-bg); }
.rodona-no { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); }
/* Dins del selector triat (fons fosc), l'anella clara es menjaria el punt */
.segment-actiu .rodona-assegurat { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); }
.segment-opcio .rodona-assegurat { margin-right: 2px; }
th.col-assegurat, td.col-assegurat { width: 1%; white-space: nowrap; }

.modal-ample.modal-assegurats { max-width: 760px; }
/* Afegint o traient, les sis columnes de grups necessiten tota l'amplada */
.modal-ample.modal-assegurats:has(form[data-assegurats-vista="editar"]:not([hidden])) { max-width: 1180px; }
.modal-assegurats .modal-cap h2 { display: flex; align-items: center; gap: 8px; }

/* Les dues llistes, l'una al costat de l'altra; al mòbil, l'una sota l'altra */
.assegurats-columnes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 16px;
}
@media (max-width: 600px) {
    .assegurats-columnes { grid-template-columns: 1fr; }
}
.assegurats-columna {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--paper);
    padding: 12px 14px;
    min-width: 0;
}
.assegurats-titol {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 0.95rem;
}
.assegurats-titol .chip-compte { margin-left: auto; }
/* Unes set files i la resta amb scroll dins la columna: amb 48vh el pop-up
   feia més alt que la pantalla i «Editar assegurats» quedava sota el plec */
.assegurats-columna .assegurats-llista { max-height: 11.5rem; }
.assegurats-buit { margin: 4px 0; color: var(--muted); font-size: 0.85rem; }

.assegurats-llista {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 48vh;
    overflow-y: auto;
}
.assegurats-llista li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    font-size: 0.9rem;
}
.assegurats-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Sense grup: el punt hi és (la columna de noms no balla) però buit */
.punt-grup-buit { background: none; border: 1.5px solid var(--muted); opacity: 0.6; }

/* Afegir o treure: una columna per grup, sis per fila, cadascuna amb una
   casella a cada nom i el seu propi scroll */
.assegurats-tria-cap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
}
.assegurats-tria-cap .export-etiqueta { margin: 0; }
.assegurats-tria-cap .btn { margin-top: 0; flex: 0 0 auto; }
.assegurats-grups {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}
@media (max-width: 1000px) {
    .assegurats-grups { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .assegurats-grups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.assegurats-grup {
    border: 1px solid var(--border);
    border-top: 3px solid var(--g-color, var(--border));
    border-radius: 10px;
    background: var(--card);
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.assegurats-grup-cap {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 8px 10px 6px;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--border);
}
.assegurats-grup-cap .chip-compte { margin-left: auto; }
.assegurats-tria {
    max-height: 28vh;
    overflow-y: auto;
    padding: 6px;
}
.assegurats-tria li { padding: 0; }
/* Quadrats baixos: amb 28vh de columna hi caben uns deu noms sense scroll */
.assegurats-tria li + li { margin-top: 2px; }
.modal form .assegurats-tria label {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 3px 8px;
    border-radius: 8px;
    font-weight: 400;
    font-size: 0.85rem;
    line-height: 1.25;
    cursor: pointer;
    min-width: 0;
}
/* A la columna estreta del grup, el nom sencer val més que els tres punts */
.assegurats-tria .assegurats-nom { white-space: normal; overflow-wrap: anywhere; }
.modal form .assegurats-tria label:hover { background: var(--paper); }
.modal form .assegurats-tria label:has(input:checked) { background: var(--success-bg); }
/* Dins de cada grup, els no assegurats a dalt i els assegurats sota la barra.
   Amb subgrid, les quatre files (capçalera, no, barra, sí) són les mateixes a
   totes les columnes, i la barra queda a la mateixa altura a tot arreu. */
.assegurats-barra {
    height: 3px;
    margin: 4px 8px;
    border-radius: 2px;
    background: var(--g-color, var(--border));
    opacity: 0.55;
}
@supports (grid-template-rows: subgrid) {
    .assegurats-grup {
        display: grid;
        grid-row: span 4;
        grid-template-rows: subgrid;
        row-gap: 0;
    }
}
/* El que s'ha tocat i encara no s'ha desat: què li passarà */
.modal form .assegurats-tria label.assegurats-afegeix { box-shadow: inset 0 0 0 1.5px var(--success); }
.modal form .assegurats-tria label.assegurats-treu {
    background: var(--danger-bg);
    box-shadow: inset 0 0 0 1.5px var(--danger);
}
.assegurats-treu .assegurats-nom { text-decoration: line-through; color: var(--muted); }
.assegurats-afegeix::after,
.assegurats-treu::after {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}
.assegurats-afegeix::after { content: "s'afegeix"; color: var(--success); }
.assegurats-treu::after { content: "es treu"; color: var(--danger); }
.modal form .assegurats-tria input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
    cursor: pointer;
    accent-color: var(--success);
}
/* A les dues llistes, la barra que separa el títol dels noms porta el color
   de la rodoneta: verda sota «Assegurats», vermella sota «No assegurats» */
.assegurats-columna .assegurats-barra { margin: 0 0 8px; }
.assegurats-barra-si { background: var(--success); }
.assegurats-barra-no { background: var(--danger); }

/* ---- Els documents de l'assegurança (a dalt del pop-up «Assegurats») ----
   El nom de cada paper és l'enllaç: un clic i s'obre en una pestanya nova.
   Els que falten es veuen apagats i diuen «sense penjar». */
.asseg-docs {
    margin-top: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--paper);
    padding: 12px 14px;
}
.asseg-docs-cap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.asseg-docs-cap .assegurats-titol { margin: 0; color: var(--brand-dark); }
.asseg-docs-cap .btn { margin-top: 0; }
.asseg-docs-barra { margin: 0 0 10px; background: var(--brand-light); }
.asseg-docs-llista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.asseg-doc {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
    color: var(--brand-dark);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}
a.asseg-doc:hover { background: var(--success-bg); border-color: var(--brand-light); }
a.asseg-doc:hover span { text-decoration: underline; }
.asseg-doc-buit {
    color: var(--muted);
    font-weight: 400;
    border-style: dashed;
    background: transparent;
}
.asseg-doc-buit small { font-size: 0.75rem; }

/* «Editar documents»: una línia per paper */
.asseg-edita {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}
.asseg-edita-fila {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
}
.asseg-edita-nova { border-style: dashed; background: var(--paper); }
.asseg-edita-icona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--success-bg);
    color: var(--brand-dark);
}
.asseg-edita-cos { flex: 1 1 auto; min-width: 0; }
.asseg-edita-titol { margin: 0; font-weight: 700; font-size: 0.95rem; }
.asseg-edita-estat,
.asseg-edita-nou {
    margin: 2px 0 0;
    font-size: 0.82rem;
    color: var(--muted);
    overflow-wrap: anywhere;
}
.asseg-edita-nou { color: var(--success); font-weight: 600; }
.asseg-edita-accions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}
.asseg-edita-accions .btn { margin-top: 0; }
.modal form .asseg-treure {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--danger);
    cursor: pointer;
}
.modal form .asseg-treure input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--danger);
}
/* El que s'ha tocat i encara no s'ha desat, com a «Editar assegurats» */
.asseg-edita-fila.asseg-canvia { box-shadow: inset 0 0 0 1.5px var(--success); background: var(--success-bg); }
.asseg-edita-fila.asseg-treu { box-shadow: inset 0 0 0 1.5px var(--danger); background: var(--danger-bg); }
.asseg-edita-fila.asseg-treu .asseg-edita-titol { text-decoration: line-through; color: var(--muted); }
@media (max-width: 600px) {
    .asseg-edita-fila { flex-wrap: wrap; }
    .asseg-edita-accions { width: 100%; justify-content: flex-end; }
}

/* Llista de fills: número, nom, grup i creu, tot en una sola línia */
#llista-fills { counter-reset: fill; }

.fila-fill {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    counter-increment: fill;
    margin-top: 18px;
}
.fila-fill::before {
    content: counter(fill) ".";
    flex: 0 0 auto;
    min-width: 15px;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.fila-fill input, .fila-fill select { margin: 0; }
.fila-fill input { flex: 1 1 160px; min-width: 0; }
.fila-fill select { flex: 0 1 215px; min-width: 0; }

/* Desplegable de grup: punt del color del grup a l'esquerra i fons pàl·lid.
   Va acompanyat de .fila-fill perquè el fons blanc genèric de "form select:focus"
   no s'empassi el punt de color ni la fletxa. */
.fila-fill .select-grup,
.modal .select-grup {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 10px 32px 10px 30px;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--g-fosc, var(--muted));
    background-color: var(--g-pale, var(--paper));
    border-color: var(--g-color, var(--border));
    background-repeat: no-repeat;
    background-position: left 11px center, right 10px center;
    background-size: 10px 10px, 13px 13px;
    background-image:
        radial-gradient(circle at center, var(--g-color, #c3cfbd) 0 5px, transparent 5px),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6b5e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.fila-fill .select-grup:hover,
.modal .select-grup:hover { filter: brightness(0.98); }
.fila-fill .select-grup:focus,
.modal .select-grup:focus {
    border-color: var(--g-color, var(--brand-light));
    box-shadow: 0 0 0 3px var(--g-pale, rgba(107, 168, 106, 0.25));
}

.btn-treure-fill {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: var(--card);
    color: var(--danger);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.btn-treure-fill:hover { background: var(--danger-bg); border-color: var(--danger); }

.sense-fills { color: var(--muted); font-size: 0.88rem; margin: 10px 0 0; }
.sense-fills[hidden] { display: none; }

/* ---------- Buscador desplegable (triar una família escrivint) ---------- */

/* En bloc, i no en fila: si el camp es marca com a obligatori, l'avís d'error
   hi cap a dins i la llista desplegable ja li queda per sota. */
.camp-combo { position: relative; }
.camp-combo input[type="text"] { padding-right: 48px; }
/* El camp fa 43 px i el botó 38: la creu no es pot centrar sola perquè el
   contenidor creix quan hi apareix l'avís d'error. */
.camp-combo .btn-netejar-cerca { top: 3px; }

.llista-combo {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 5;
    max-height: 232px;
    overflow-y: auto;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 10px 26px rgba(20, 99, 47, 0.18);
}
.llista-combo[hidden] { display: none; }

.opcio-combo {
    padding: 8px 10px;
    border-radius: 7px;
    cursor: pointer;
    line-height: 1.35;
}
.opcio-combo[hidden] { display: none; }
.opcio-combo:hover,
.opcio-combo.opcio-activa { background: var(--success-bg); }

.opcio-nom { display: block; font-weight: 600; font-size: 0.93rem; }
.opcio-detall { display: block; color: var(--muted); font-size: 0.82rem; }

.combo-buit {
    padding: 10px;
    color: var(--muted);
    font-size: 0.88rem;
}
.combo-buit[hidden] { display: none; }

/* Un cop triada la família, el camp deixa de semblar una casella de cerca:
   es tenyeix de verd i hi surt un vist a l'esquerra. */
.camp-combo.te-familia input[type="text"] {
    background-color: var(--success-bg);
    border-color: var(--success);
    color: var(--brand-dark);
    font-weight: 600;
    padding-left: 38px;
    background-repeat: no-repeat;
    background-position: left 12px center;
    background-size: 16px 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f7a3d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

/* ---------- Rodeta de configuració (capçalera) ---------- */

.site-header nav .nav-rodeta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    color: var(--brand-pale);
}
.site-header nav .nav-rodeta:hover {
    background: rgba(255, 255, 255, 0.16);
    color: white;
}
.site-header nav .nav-rodeta svg { display: block; }

/* ---------- Pàgina de configuració ----------
   La pàgina va en pestanyes (Accés, El portal, Dades, Zona de perill) i, dins
   de cadascuna, en blocs separats per una ratlla. La jerarquia és sempre la
   mateixa: el que es fa cada dia va dins d'un quadre destacat, el que només es
   mira va amb lletra petita, i l'explicació sempre a sota del títol. */

/* La ratlla de la sessió: amb quin correu s'ha entrat i amb quin permís. És
   l'únic que veu qui no és administrador, i per això va per damunt de tot. */
.config-sessio {
    display: flex;
    align-items: center;
    gap: 10px 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    font-size: 0.92rem;
    font-weight: 600;
}
.badge-permis { background: var(--brand-pale); color: var(--brand-dark); }
/* L'ajuda se'n va a la dreta: la ratlla queda amb el correu a l'esquerra i la
   lletra petita a l'altre extrem, sense competir-hi */
.config-sessio-fitxa { margin-left: auto; font-weight: 400; }

/* Els apartats de dins d'una pestanya */
.config-bloc + .config-bloc {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}
.config-bloc > h3 {
    margin: 0 0 12px;
    font-size: 1.02rem;
}

/* L'acció que s'ha de trobar de seguida (la porta de les famílies, la còpia de
   seguretat): la mateixa fila de sempre, però dins d'un quadre que la separa
   de tot el que hi ha al voltant. */
.config-destacat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--paper);
}
.config-destacat + .config-bloc {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}
.config-destacat .btn { margin-top: 0; flex: 0 0 auto; }
/* L'enunciat encongeix i la resposta es queda al costat. Sense això el text
   s'estirava fins a ocupar la fila sencera i el botó queia a la línia de sota,
   amb mig pam de blanc a la dreta de l'explicació. Per sota dels 260px de
   l'enunciat sí que passa a sota: al mòbil no hi ha «l'altre extrem». */
.config-destacat > :first-child { flex: 1 1 260px; min-width: 0; }
.config-destacat > form { flex: 0 0 auto; margin-left: auto; }
.config-destacat .config-titol {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--brand-dark);
}
/* Quan el portal és tancat no n'hi ha prou amb la pastilla: tot el quadre ho diu */
.config-destacat-alerta { border-color: var(--danger); background: var(--danger-bg); }

/* La fitxa tècnica: dades que aquí només es miren (es canvien a secrets.php).
   En columnes i amb lletra petita, que no semblin coses per tocar. */
.config-tecnic {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px 18px;
    margin: 0 0 10px;
}
.config-tecnic > div { min-width: 0; }
.config-tecnic dt {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.config-tecnic dd {
    margin: 2px 0 0;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

/* La lletra petita que només es llegeix un cop (les columnes que ha de tenir
   el full que s'importa) va plegada: hi és, però no fa nosa cada vegada. */
.config-plec { margin-bottom: 14px; }
.config-plec > summary {
    cursor: pointer;
    color: var(--brand-dark);
    font-size: 0.9rem;
    font-weight: 600;
}
.config-plec > summary:hover { text-decoration: underline; }

.config-ajuda {
    display: block;   /* de vegades és un <span>: la línia d'ajuda sempre va a part */
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.45;
    margin-top: 3px;
}
.config-ajuda-inline { color: var(--muted); font-size: 0.85rem; }

/* Les insígnies dels grups a la llista de qui entra al panell */
.config-grups {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

@media (max-width: 640px) {
    /* Al mòbil no hi ha «l'altre extrem»: l'ajuda va a la línia de sota */
    .config-sessio-fitxa { margin-left: 0; flex-basis: 100%; }
    .config-destacat { padding: 14px 16px; }
}

.taula-recompte { width: 100%; }
.taula-recompte td { padding: 8px 4px; }
.taula-recompte .taula-recompte-xifra { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* L'estat del portal escrit al costat del títol, que es vegi també en visual */
.config-titol .badge-portal { margin-left: 8px; vertical-align: 2px; font-size: 0.72rem; }

/* Els formularis d'una fila de configuració no porten marge propi */
.config-form { margin: 0; }
.config-form-fitxer { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Al lloc d'un botó que en mode visual no hi és: diu per què no hi és.
   Només amb <body class="lectura">; en edició hi ha el botó i prou. */
.config-cal-edicio {
    display: none;
    margin-left: auto;
    color: var(--muted);
    font-size: 0.85rem;
    font-style: italic;
}
.lectura .config-cal-edicio { display: inline-block; }
/* I el que només s'ha de veure en visual (la llista de la zona de perill,
   el botó d'activar el mode al quadre de l'esborrat que espera) */
.config-nomes-lectura { display: none; }
.lectura .config-nomes-lectura { display: block; }

/* El que abans anava en style="" a configuracio.php */
.config-cap { margin-top: 0; }
.config-peu { margin-bottom: 0; }
.config-detall { margin: 8px 0 0; padding-left: 20px; }
.config-alert-linia { margin-top: 6px; }
.config-sac { margin: 18px 0 6px; font-size: 0.95rem; }
.config-sac-error { color: var(--danger); }
.config-sac-llista { margin: 0; padding-left: 20px; }
.config-importa-botons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin: 18px 0 0;
}
.config-bloc > .config-plec + .config-plec { margin-top: 4px; }

/* Fila "títol + explicació a l'esquerra, botó a la dreta" */
.config-accio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 0;
    border-top: 1px solid var(--border);
}
.config-accio:first-of-type { border-top: none; padding-top: 4px; }
.config-accio .btn,
.config-accio .icon-btn { margin-top: 0; flex: 0 0 auto; }
/* Igual que al quadre destacat: l'enunciat encongeix perquè la resposta es
   quedi al seu costat i no pas a la ratlla de sota */
.config-accio > :first-child { flex: 1 1 260px; min-width: 0; }
.config-accio > form { flex: 0 0 auto; margin-left: auto; }

/* Dues accions al mateix costat d'una fila (editar l'avís i anar a veure'l) */
.config-accio-botons { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; margin-left: auto; }

/* ---------- Pastilles: dues posicions, i es veuen totes dues ----------
   Per a l'interruptor que no es pot prémer per equivocació. Un botó sol havia
   de dir el contrari del que passava («Tancar el portal» volia dir que era
   obert), i això s'ha de llegir dues vegades. Aquí les dues posicions són a la
   vista, la que mana surt encesa i apagada (disabled: no hi ha res a fer, ja hi
   som) i l'altra és l'única que es deixa prémer. */

.pastilles {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 3px;
    gap: 3px;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    background: var(--paper);
}
.pastilla {
    border: none;
    border-radius: 999px;
    padding: 7px 18px;
    background: none;
    color: var(--muted);
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.pastilla:hover { background: var(--card); color: var(--ink); }

/* La que mana. Va amb [disabled] i, per tant, cal desfer l'apagat que els
   navegadors hi posen sols: aquí «no s'hi pot prémer» vol dir «ja hi ets». */
.pastilla.es-triada,
.pastilla.es-triada:hover,
.pastilla[disabled] {
    background: var(--brand-dark);
    color: white;
    cursor: default;
    opacity: 1;
}
.pastilla-perill.es-triada,
.pastilla-perill.es-triada:hover,
.pastilla-perill[disabled] { background: var(--danger); }

/* ---------- L'esborrat que espera ----------
   Va fora de les pestanyes, a dalt de tot de la configuració: mentre hi hagi
   dades comptades per esborrar, s'ha de veure des d'on siguis, i el botó
   d'aturar-lo ha de ser al costat i no pas a la zona de perill. */
.config-espera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 2px solid var(--danger);
    border-radius: 10px;
    background: var(--danger-bg);
}
.config-espera strong { color: var(--danger); }
.config-espera .btn { margin-top: 0; flex: 0 0 auto; }

/* ---------- Zona de perill ----------
   Té pestanya pròpia, i tant la pestanya com el títol van de vermell: és
   l'única de les quatre que no s'obre per mirar-hi res. */

.panell-perill h2 { color: var(--danger); }

.perill-blocs {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.perill-bloc {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--paper);
    cursor: pointer;
}
.perill-bloc:hover { border-color: var(--danger); }
/* La casella no és un camp de formulari com els altres: sense mida pròpia
   s'empassa el width:100% de `form input` i l'etiqueta acaba fora del quadre. */
.perill-bloc input[type="checkbox"],
.perill-tot input[type="checkbox"] {
    width: 17px;
    height: 17px;
    padding: 0;
    flex: 0 0 auto;
    cursor: pointer;
    accent-color: var(--danger);
}
.perill-bloc input[type="checkbox"] { margin: 4px 0 0; }
.perill-bloc:has(input:checked) {
    border-color: var(--danger);
    background: var(--danger-bg);
}
.perill-bloc > span { display: block; }

.perill-comptador {
    display: inline-block;
    margin-left: 8px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.perill-tot {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1.5px dashed var(--danger);
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.92rem;
}
.perill-tot input[type="checkbox"] { margin: 3px 0 0; }

.perill-confirmacio {
    display: block;
    margin: 16px 0 0;
    font-size: 0.9rem;
    font-weight: 600;
}
.perill-confirmacio input[type="text"] {
    display: block;
    max-width: 260px;
    margin-top: 6px;
    font-family: monospace;
    letter-spacing: 0.08em;
}
.perill-confirmacio code { background: rgba(0, 0, 0, 0.06); padding: 1px 5px; border-radius: 5px; }

.panell-perill .btn-danger { margin-top: 16px; }

.perill-boto { text-align: right; }

/* La zona de perill en mode visual: què hi ha, sense caselles que semblin vives */
.perill-lectura {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}
.perill-lectura li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}

/* ---------- Panell d'administració ----------
   A dalt, el quadre de l'activitat: a la franja de dalt els xips per triar-la
   i a sota els tres botons i els infants per grup. A sota del quadre, de banda
   a banda, el registre. En pantalla petita, tot en fila. */

.panell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
.panell-registre { min-width: 0; }

/* El quadre: la franja de les activitats a dalt, les dades a sota. La vora
   verda i la franja tenyida el separen del fons de la pàgina, que és del mateix
   blanc trencat que abans feia servir la columna de les activitats. */
.panell-activitat {
    background: var(--card);
    border: 1.5px solid var(--brand-pale);
    border-radius: var(--radius);
    box-shadow: 0 2px 8px rgba(20, 99, 47, 0.08);
    overflow: hidden;
}

/* Tot en una fila: el títol, les pestanyes i «Gestionar activitats». Les
   pestanyes s'asseuen a la ratlla de sota de la franja, com les de la
   configuració, i la triada se la menja i queda cosida al quadre. */
.panell-acts {
    display: flex;
    align-items: flex-end;
    gap: 8px 20px;
    padding: 14px 22px 0;
    background: var(--success-bg);
    border-bottom: 1.5px solid var(--brand-pale);
}
.panell-acts-titol {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding-bottom: 14px;
    font-size: 1.45rem;
    color: var(--brand-dark);
}
.panell-acts-titol svg { flex: none; color: var(--brand-dark); }
.panell-acts-gestio {
    flex: none;
    align-self: center;
    margin: 0 0 0 auto;
    background: var(--card);
    white-space: nowrap;
}

/* Una pestanya per activitat: el nom a dalt i en quin punt és a sota */
.panell-acts-llista {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    min-width: 0;
    margin-bottom: -1.5px;
    overflow-x: auto;
    scrollbar-width: none;
}
.panell-acts-llista::-webkit-scrollbar { display: none; }
.panell-act {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 9px 16px 10px;
    background: rgba(255, 255, 255, 0.5);
    border: 1.5px solid transparent;
    border-radius: var(--radius) var(--radius) 0 0;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}
.panell-act:hover { background: var(--card); color: var(--brand-dark); }
.panell-act.es-triada {
    background: var(--card);
    border-color: var(--brand-pale);
    border-bottom-color: var(--card);
    color: var(--brand-dark);
}
.panell-act .badge { font-size: 0.7rem; padding: 2px 9px; }
/* La segona línia de «Totes», que no té estat: de la mida d'una insígnia */
.panell-act-estat { font-size: 0.72rem; font-weight: 600; color: var(--muted); padding: 2px 0; }

.panell-act-dades {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 20px 22px 22px;
    min-width: 0;
}

.panell-act-cap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.panell-act-cap h2 { margin: 0; font-size: 1.3rem; }
.panell-act-cap > .badge { flex: none; white-space: nowrap; }
.panell-act-sub { margin: 3px 0 0; color: var(--muted); font-size: 0.88rem; }
.panell-act-termini { margin-top: 1px; }
.panell-act-termini strong { font-weight: 600; color: var(--ink); }

.panell-botons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.panell-grups {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
}
.panell-grups-cap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
}
/* El títol s'encongeix (i la llegenda salta de línia) abans que el total
   baixi de fila: a 320 px tots dos hi han de cabre */
.panell-grups-cap-titol { flex: 1 1 auto; min-width: 0; }
.panell-grups h3 { margin: 0; font-size: 1rem; }
.panell-grups-llegenda { display: block; color: var(--muted); font-size: 0.85rem; }
.panell-grups .buit { margin: 0; }
.panell-grups-llista { list-style: none; margin: 0; padding: 0; }
.panell-grups-llista li {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) 36px;
    align-items: center;
    gap: 12px;
    padding: 5px 0;
}
.panell-grups-llista a.sense-decoracio { text-decoration: none; }
.panell-grups-barra {
    height: 8px;
    border-radius: 999px;
    background: var(--paper);
    overflow: hidden;
}
.panell-grups-barra > span {
    display: block;
    height: 100%;
    min-width: 4px;
    border-radius: 999px;
    background: var(--muted);   /* la dels infants sense grup; els altres, el color del seu */
}
.panell-grups-barra > span.buida { min-width: 0; }
/* Amb «x/y» la xifra demana més lloc */
.panell-grups-llista.amb-proporcio li { grid-template-columns: 150px minmax(0, 1fr) 64px; }
.panell-grups-n {
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
/* El total de tots els grups, a la dreta de la fila del títol */
.panell-grups-total {
    flex: 0 1 auto;
    margin: 0;
    text-align: right;
    font-size: 1rem;
}
.panell-grups-total strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.panell-grups-total .diners-pendent {
    display: block;
    color: var(--danger);
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
}


/* Botó gran: icona, nom i xifra a sota */
.boto-gran {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 20px;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--brand-dark);
    box-shadow: 0 1px 3px rgba(20, 99, 47, 0.06);
    transition: border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.boto-gran:hover {
    border-color: var(--brand-light);
    box-shadow: 0 6px 16px rgba(20, 99, 47, 0.12);
    transform: translateY(-2px);
}
.boto-gran:active { transform: translateY(0); }

.boto-gran svg {
    width: 26px;
    height: 26px;
    margin-bottom: 6px;
    color: var(--brand-light);
}
.boto-gran strong {
    font-size: 1.15rem;
    line-height: 1.2;
}
.boto-gran span {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
}

/* Els diners del botó de pagaments: pendent, cobrat i el balanç, una línia cadascun */
.boto-gran .boto-gran-diners {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-variant-numeric: tabular-nums;
}
.boto-gran .diners-pendent { color: var(--danger); }
.boto-gran .diners-cobrat { color: var(--success); }
.boto-gran .diners-balanc {
    margin-top: 3px;
    padding-top: 4px;
    border-top: 1px solid var(--border);
    color: var(--ink);
}
/* El balanç només es parteix pel «·», mai enmig d'una xifra */
.boto-gran .sense-salt { margin: 0; white-space: nowrap; color: inherit; }

/* Resum de diners (pàgina de pagaments) */
.diners {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
}
.diners-bloc { display: flex; flex-direction: column; }
.diners-etiqueta {
    color: var(--muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
}
.diners-bloc strong {
    font-size: 1.6rem;
    color: var(--brand-dark);
    font-variant-numeric: tabular-nums;
}
.diners-ok strong { color: var(--success); }
.diners-deute strong { color: var(--danger); }

/* ---------- Registre d'activitat ---------- */

.registre {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
}

.registre-item {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) 240px;
    gap: 14px;
    padding: 12px 0 12px 12px;
    border-top: 1px solid var(--border);
    border-left: 3px solid var(--border);
}
.registre-item:first-child { border-top: none; }

/* El color de la vora esquerra diu de quin to és el que ha passat */
.registre-ok { border-left-color: var(--success); }
.registre-avis { border-left-color: var(--warning-ink); }
.registre-perill { border-left-color: var(--danger); }
.registre-neutre { border-left-color: var(--border); }

.registre-quan {
    display: flex;
    flex-direction: column;
    font-size: 0.82rem;
    color: var(--muted);
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
}
.registre-quan strong { color: var(--ink); font-weight: 700; }
.registre-quan small { opacity: 0.8; }

.registre-cos { min-width: 0; }

.registre-cap {
    display: flex;
    align-items: baseline;
    gap: 9px;
    flex-wrap: wrap;
}
.registre-text { font-size: 0.95rem; }

.registre-qui {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.82rem;
    word-break: break-word;
}
.registre-qui a { color: var(--brand-dark); font-weight: 600; text-decoration: none; }
.registre-qui a:hover { text-decoration: underline; }
.registre-sep { margin: 0 6px; opacity: 0.5; }
.registre-anonim { font-style: italic; }
.registre-ip { font-family: monospace; font-size: 0.78rem; opacity: 0.75; }

/* La columna de qui ho ha fet: nom, correu i IP, una línia cadascun */
.registre-actor {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    padding-right: 10px;
    font-size: 0.82rem;
    color: var(--muted);
    line-height: 1.35;
}
.registre-actor strong { color: var(--ink); font-weight: 600; font-size: 0.88rem; }
.registre-correu { overflow-wrap: anywhere; }

/* Insígnia del tipus d'esdeveniment */
.badge-reg { white-space: nowrap; }
.badge-reg-ok { background: var(--success-bg); color: var(--success); }
.badge-reg-avis { background: var(--warning-bg); color: var(--warning-ink); }
.badge-reg-perill { background: var(--danger-bg); color: var(--danger); }
.badge-reg-neutre { background: var(--paper); color: var(--muted); border: 1px solid var(--border); }

@media (max-width: 900px) {
    /* Els xips de les activitats, més justos */
    .panell-acts { flex-wrap: wrap; gap: 10px 12px; padding: 12px 16px 0; }
    .panell-acts-titol { font-size: 1.25rem; padding-bottom: 0; align-self: center; }
    /* Les pestanyes, a la seva fila sota el títol i el botó; si no hi caben,
       es passen amb el dit */
    .panell-acts-llista { order: 3; flex-basis: 100%; }
    .panell-act-dades { padding: 16px; }
    .panell-botons { grid-template-columns: 1fr; }
    .panell-grups-llista li { grid-template-columns: 130px minmax(0, 1fr) 32px; }
    .panell-grups-llista.amb-proporcio li { grid-template-columns: 110px minmax(0, 1fr) 56px; }
    .registre-item { grid-template-columns: 96px minmax(0, 1fr); }
    .registre-actor { grid-column: 2; flex-direction: row; flex-wrap: wrap; gap: 0 10px; }
    .boto-gran {
        flex-direction: row;
        align-items: center;
        gap: 14px;
        padding: 16px 18px;
    }
    .boto-gran svg { margin-bottom: 0; }
    .boto-gran strong { font-size: 1.05rem; }
    .boto-gran span { margin-left: auto; text-align: right; }
}

@media (max-width: 560px) {
    .registre-item {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .registre-quan { flex-direction: row; gap: 8px; align-items: baseline; }
    .registre-actor { grid-column: auto; }
    .diners { gap: 18px; }
}


/* ---------- Portal de la família (tauler i fitxa del fill/a) ---------- */

/* Tot el que va sota la capçalera de la targeta (la taula d'inscripcions) */
.child-cos { margin-top: 6px; }
.child-cos table { margin-top: 8px; }
.child-cos table tr:last-child td { border-bottom: none; }

/* La taula d'activitats del fill/a: a l'esquerra les que pot fer i les que ja
   ha fet, i a la dreta de tot què pot fer-hi ara. Els botons van arrapats a la
   dreta i, si no hi caben tots, baixen de línia en comptes d'estirar la taula.
   Quan ni així no hi cap, la taula es desplaça i la targeta es queda quieta. */
.taula-ampla { overflow-x: auto; }
.cel-accions { text-align: center; }
.accions-taula { justify-content: center; flex-wrap: wrap; }
.accions-taula .icon-btn span { white-space: nowrap; }

/* Les insígnies i el preu no es parteixen mai en dues ratlles: qui ha de cedir
   amplada és el nom de l'activitat, que es llegeix igual de bé partit */
.child-cos td .badge { white-space: nowrap; }
.child-cos .cel-preu { white-space: nowrap; }
/* ...però no tant que un nom curt com «Curs 2026-27» es parteixi pel guionet:
   l'estat, en canvi, pot baixar de línia sense problema */
.child-cos .cel-activitat { min-width: 8em; }

/* L'activitat que encara no ha obert: hi és per avisar que ve, no per fer-hi
   res. Va mig apagada perquè l'ull la salti quan busca què ha de fer i la
   trobi quan busca què hi haurà. */
.fila-per-obrir .cel-activitat,
.fila-per-obrir .cel-preu { color: var(--muted); }

/* El que queda per pagar d'un fill/a: el número gros i el compte, junts, que
   és l'única cosa que la família ha de copiar al banc */
.caixa-pagament {
    margin-top: 10px;
    padding: 14px 16px;
    border: 1.5px solid var(--brand-pale);
    border-left: 4px solid var(--brand-light);
    border-radius: 10px;
    background: var(--success-bg);
    font-size: 0.9rem;
}
.caixa-pagament strong { color: var(--brand-dark); }

/* ====================================================================
   Muntar una activitat (/admin/activitat)
   ==================================================================== */

/* ---------- Triar entre unes quantes coses, amb targetes ----------
   La mena d'activitat i la manera de pagar: en comptes d'un desplegable on
   nomes hi cap una paraula, cada opcio s'explica sola. */

.tria-targetes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 10px;
    margin-top: 6px;
}

.tria-targeta {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 15px;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.tria-targeta:hover { border-color: var(--brand-light); }
.tria-targeta:has(input:checked) {
    border-color: var(--brand-light);
    background: var(--success-bg);
    box-shadow: inset 0 0 0 1px var(--brand-light);
}
.tria-targeta input {
    width: auto;          /* els camps del portal son width:100%; un rodona, no */
    margin: 3px 0 0;
    flex: 0 0 auto;
    accent-color: var(--brand-dark);
}

.tria-text { display: block; min-width: 0; line-height: 1.4; }
.tria-text strong { display: block; font-size: 0.95rem; color: var(--ink); }
.tria-resum { display: block; color: var(--muted); font-size: 0.85rem; }
.tria-detall {
    display: block;
    color: var(--muted);
    font-size: 0.8rem;
    margin-top: 5px;
}
.tria-import {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--card);
    border: 1px solid var(--brand-pale);
    color: var(--brand-dark);
    font-size: 0.82rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tria-targetes-modal { grid-template-columns: 1fr; gap: 8px; }
.tria-targetes-modal .tria-targeta { padding: 10px 13px; }

/* ---------- Els grups que hi poden anar ----------
   Una fila per grup, amb el seu color: es veu d'una ullada qui hi entra. */

.taula-tria { margin-top: 6px; }
.taula-tria th, .taula-tria td { padding: 8px 10px; }
.taula-tria tbody tr {
    border-left: 4px solid transparent;
    transition: background 0.15s;
}
.taula-tria tbody tr:has(input:checked) {
    background: var(--g-pale);
    border-left-color: var(--g-color);
}
.taula-tria tbody tr:not(:has(input:checked)) .tria-grup,
.taula-tria tbody tr:not(:has(input:checked)) .tria-anys { opacity: 0.5; }

.taula-tria .tria-casella { width: 1%; white-space: nowrap; }
.taula-tria input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin: 0;
    display: block;
    cursor: pointer;
    accent-color: var(--g-color, var(--brand-dark));
}

.tria-grup {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-weight: 600;
    color: var(--g-fosc, var(--ink));
    cursor: pointer;
}
.tria-grup .punt-grup { width: 11px; height: 11px; }
.tria-anys {
    margin: 0;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 400;
    cursor: pointer;
}
.taula-tria .dreta { text-align: right; }

/* ---------- Els grups d'un avís d'activitat ----------
   Caselles en línia, cadascuna del color del seu grup: les marcades es veuen
   enceses i les altres, apagades, de manera que d'una ullada es veu a quantes
   anyades de dins de l'activitat va l'avís. */

.avis-grups {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0 10px;
}
.avis-grup {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 6px 12px 6px 9px;
    border: 1px solid var(--g-color, var(--border));
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--g-fosc, var(--ink));
    background: var(--card, #fff);
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}
/* El `display` d'aquí guanya al del navegador: sense això, els grups que
   l'activitat no admet es queden a la vista tot i estar amagats */
.avis-grup[hidden] { display: none; }
.avis-grup:has(input:checked) { background: var(--g-pale); }
.avis-grup:not(:has(input:checked)) { opacity: 0.5; }
.avis-grup input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--g-color, var(--brand-dark));
}

/* ---------- El preu i les setmanes ---------- */

.preu-principal { max-width: 260px; }

/* Un import amb el seu simbol enganxat, per no haver-lo d'escriure */
.camp-euros {
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: var(--card);
    overflow: hidden;
}
.camp-euros:focus-within { border-color: var(--brand-light); }
.camp-euros input {
    margin: 0;
    border: none;
    border-radius: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
    min-width: 0;
}
.camp-euros input:focus { box-shadow: none; }
.camp-euros span {
    display: flex;
    align-items: center;
    padding: 0 11px;
    background: var(--paper);
    border-left: 1px solid var(--border);
    color: var(--muted);
    font-weight: 600;
}

.taula-opcions input[type="text"] { margin: 0; }
.taula-opcions th, .taula-opcions td { padding: 7px 8px; vertical-align: middle; }
.taula-opcions .dreta { text-align: right; }
.taula-opcions .dreta .camp-euros { margin-left: auto; max-width: 130px; }
.taula-opcions .tria-casella { width: 1%; white-space: nowrap; }
.taula-opcions .fila-nova { background: var(--paper); }
.taula-opcions tfoot td {
    border-bottom: none;
    color: var(--muted);
    font-size: 0.9rem;
}
.taula-opcions tfoot strong {
    color: var(--brand-dark);
    font-variant-numeric: tabular-nums;
}

/* ---------- Les dates del termini, a la llista d'activitats ---------- */

.cel-data { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Quantes n'hi ha, dins d'un rodon al botó que obre el pop-up dels convits */
.compte-rodo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    /* El mig punt de sota puja el dígit fins al centre de debò: la caixa de la
       lletra guarda lloc per a les cues (g, p) i, sense això, el número queda
       un pèl baix dins del rodó. Amb border-box, el rodó no creix. */
    padding: 0 5px 1.5px;
    box-sizing: border-box;
    border-radius: 999px;
    background: var(--brand-dark);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-align: center;
}
/* Dins d'un botó de fons fosc, el rodó es fa amb el mateix fons aclarit */
.btn-secondary .compte-rodo { background: rgba(255, 255, 255, 0.28); }
/* Cap convidada: el rodó hi és (la fila no ballaria amunt i avall) però no
   demana res, que un zero ben fosc sembla un avís i no ho és */
.compte-rodo-cap {
    background: none;
    border: 1.5px solid var(--border);
    color: var(--muted);
}

/* Una línia per família convidada: qui és, fins quan hi pot entrar i la
   paperera per treure-la. La data es desa sola en canviar-la. */
.convits-actuals { margin-bottom: 6px; }
.convits-fitxes { list-style: none; margin: 0; padding: 0; }

.convit-fitxa {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 10px 8px 12px;
}
.convit-fitxa + .convit-fitxa { margin-top: 8px; }
/* El nom s'empassa l'espai que sobra: la data i la paperera van a la dreta */
.convit-fitxa > .enllac-fort { flex: 1 1 auto; min-width: 0; }
.convit-fitxa form { margin: 0; }

.convit-edita {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}
.convit-edita label {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
}
.convit-edita input[type="date"] {
    margin: 0;
    width: auto;
    padding: 6px 8px;
    font-size: 0.9rem;
}

/* Al pop-up de Famílies, la família ja ve triada per la fila */
.convidar-qui { margin: 14px 0; }

/* Només la paperera: el text ja el diu el títol de la fila */
.icon-btn-treure {
    padding: 6px;
    color: var(--danger);
}
.icon-btn-treure:hover { background: var(--danger-bg); border-color: var(--danger); }

/* ============================================================
   Pestanyes (assets/pestanyes.js)
   ============================================================ */

/* La barra fa de vora de dalt del panell: les pestanyes s'hi asseuen a sobre
   amb un pèl de marge negatiu, i la que està triada s'hi menja la ratlla i
   queda cosida al panell. */

.pestanyes { margin-bottom: 20px; }

.pestanyes-barra {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    border-bottom: 1px solid var(--border);
    /* La barra de desplaçament, quan les pestanyes no caben, fa més nosa que
       servei: ja s'entén que hi ha més coses perquè l'última queda tallada */
    scrollbar-width: none;
}
.pestanyes-barra::-webkit-scrollbar { display: none; }

.pestanya {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: -1px;
    padding: 11px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
    background: var(--paper);
    color: var(--muted);
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.pestanya:hover { background: #eaf1e3; color: var(--brand-dark); }
.pestanya:focus-visible {
    outline: 2px solid var(--brand-light);
    outline-offset: -3px;
}
.pestanya[aria-selected="true"] {
    background: var(--card);
    border-bottom-color: var(--card);
    color: var(--brand-dark);
}

/* El número del pas, al full de la família */
.pestanya-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--border);
    color: var(--muted);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}
.pestanya[aria-selected="true"] .pestanya-num {
    background: var(--brand-dark);
    color: #fff;
}

/* Quan els passos no caben a la barra (assets/pestanyes.js hi posa la classe)
   només es llegeix el nom del pas on som; de la resta, el número */
.pestanyes-estretes .pestanya:not([aria-selected="true"]) .pestanya-titol {
    display: none;
}
.pestanyes-estretes .pestanya:not([aria-selected="true"]) {
    gap: 0;
    padding-left: 12px;
    padding-right: 12px;
}
/* El punt d'error sí que vol una mica d'aire, que si no s'enganxa al número */
.pestanyes-estretes .pestanya:not([aria-selected="true"]).te-error::after {
    margin-left: 5px;
}

/* Un punt vermell quan, en provar de desar, en aquell pas hi falta alguna cosa */
.pestanya.te-error::after {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--danger);
    flex: none;
}

/* La zona de perill de la configuració no és una pestanya com les altres: no
   s'hi entra a mirar res, i per això va de vermell des de la barra. La ratlla
   de dalt és una ombra i no pas una vora: una vora canviaria l'alçada de la
   pestanya i la faria ballar cada cop que es tria. */
.pestanya-perill { color: var(--danger); }
.pestanya-perill:hover { background: var(--danger-bg); color: var(--danger); }
.pestanya-perill[aria-selected="true"] {
    color: var(--danger);
    box-shadow: inset 0 3px 0 var(--danger);
}

.pestanyes-cos {
    background: var(--card);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    padding: 26px;
    box-shadow: 0 1px 3px rgba(20,99,47,0.06);
}

/* Sense JavaScript els panells surten tots seguits, separats per una ratlla */
.pestanya-panell + .pestanya-panell {
    margin-top: 26px;
    padding-top: 26px;
    border-top: 1px solid var(--border);
}
.js-pestanyes .pestanya-panell {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
/* Amb classe, mai amb [hidden]: mira el capdamunt de pestanyes.js */
.js-pestanyes .pestanya-panell:not(.actiu) { display: none; }
.pestanya-panell:focus { outline: none; }
.pestanya-panell > h2:first-child,
.pestanya-panell > .page-head:first-child { margin-top: 0; }

/* ---------- Enrere i Següent ---------- */

.pestanyes-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
}
.pestanyes-nav[hidden] { display: none; }
.pestanyes-nav .btn { margin-top: 0; }
.pestanyes-nav [data-pas-endavant] { margin-left: auto; }
.pestanyes-nav [data-pas-enrere][disabled] { opacity: 0.45; cursor: default; }
.pestanyes-compte {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
    .pestanyes-cos { padding: 18px 16px; }
    .pestanya { padding: 10px 14px; font-size: 0.88rem; }
    /* Al mòbil el compte de passos ja diu on som: el nom de l'apartat el porta
       el títol de dins del panell */
    .pestanyes-nav { gap: 10px; }
    .pestanyes-compte { order: 3; flex-basis: 100%; text-align: center; }
    .pestanyes-nav { flex-wrap: wrap; }
}

/* ---------- Apartats plegables (el full, al panell) ---------- */

.apartat-plec {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--paper);
    margin-bottom: 12px;
}
.apartat-plec[open] { background: var(--card); }
.apartat-plec > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-radius: 10px;
    color: var(--brand-dark);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}
.apartat-plec > summary::-webkit-details-marker { display: none; }
.apartat-plec > summary::before {
    content: "▸";
    color: var(--muted);
    font-weight: 400;
}
.apartat-plec[open] > summary::before { content: "▾"; }
.apartat-plec[open] > summary { border-bottom: 1px solid var(--border); border-radius: 10px 10px 0 0; }
.apartat-plec > summary:hover { background: #eaf1e3; }
.apartat-plec .apartat-cos { padding: 16px; }
.apartat-plec .apartat-suau { color: var(--muted); font-weight: 400; font-size: 0.85rem; }

/* ---------- El constructor del full (al panell) ----------
   Un apartat és una llista, i cada camp una LÍNIA: què es demana, de quina
   mena és la resposta, si és obligatòria i si s'omple sola des de la fitxa.
   Tot el que se'n pot canviar viu plegat a dins, perquè un apartat de quinze
   camps s'hagi de poder llegir sencer sense fer scroll tres pantalles. */

.full-llegenda {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--muted);
    font-size: 0.88rem;
}
.full-llegenda .badge { margin-right: 6px; }

.badge-fitxa { background: #eaf1e3; color: var(--brand-dark); }
.badge-propia {
    background: var(--paper);
    color: var(--muted);
    border: 1px dashed var(--border);
}
.badge-obligatoria { background: var(--danger-bg); color: var(--danger); }
.badge-opcional { background: var(--paper); color: var(--muted); }
.badge-firma { background: var(--warning-bg); color: var(--warning-ink); }

/* El títol del full i el botó d'afegir-hi un apartat, a la dreta */
.full-cap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.full-cap .btn { margin-top: 0; flex: 0 0 auto; }

.apartat-titol { flex: 1 1 auto; min-width: 0; }

/* Les eines de l'apartat viuen a la barra plegada: així el full es pot
   reordenar sense haver de desplegar-ne cap. Els formularis que les mouen són
   a fora del <details> (un <form> no cap dins d'un <summary>) i no es veuen. */
.apartat-moure[hidden] { display: none; }
.apartat-eines {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-left: auto;
    flex: 0 0 auto;
}
.apartat-eines .btn { margin-top: 0; }

/* La firma, tal com la veurà la família */
.apartat-firma {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px dashed var(--border);
}
.firma-vista {
    max-height: 160px;
    overflow-y: auto;
    padding: 10px 13px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--paper);
    font-size: 0.83rem;
    line-height: 1.6;
    text-align: justify;
}

.camps-titol {
    margin: 18px 0 8px;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.camps-llista {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

/* Una línia per camp: què es demana, de quina mena és la resposta, si és
   obligatòria i si s'omple sola. Reordenar i treure es fan des d'aquí
   mateix, que és el que més es fa; l'editor no es dibuixa fins que no es demana. */
.camp-fila {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card);
}
.camp-fila:hover { border-color: var(--brand-light); }
.camp-fila-editant {
    border-color: var(--brand-light);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-fletxa {
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--muted);
    border-radius: 6px;
    min-width: 26px;
    height: 26px;
    line-height: 1;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0 4px;
}
.btn-fletxa:hover:not(:disabled) { border-color: var(--brand-light); color: var(--brand-dark); }
.btn-fletxa:disabled { opacity: 0.3; cursor: default; }
.btn-fletxa-perill:hover { border-color: var(--danger); color: var(--danger); }

.camp-num {
    flex: 0 0 auto;
    width: 20px;
    text-align: right;
    color: var(--muted);
    font-size: 0.78rem;
}
.camp-nom {
    flex: 1 1 220px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    font-weight: 600;
}
.camp-enunciat { display: block; }
.camp-nom .obl { color: var(--danger); }
.camp-clau {
    font-weight: 400;
    font-size: 0.76rem;
    color: var(--muted);
}
.camp-mena {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--muted);
    white-space: nowrap;
}
.camp-icona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 4px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--paper);
    font-size: 0.78rem;
}
.camp-marques { display: flex; gap: 4px; flex-wrap: wrap; }
.camp-marques .badge { font-size: 0.7rem; padding: 2px 8px; }
.camp-accions { display: flex; gap: 4px; align-items: center; margin-left: auto; }
.camp-accions form { display: inline; }

.camp-editor {
    border: 1px solid var(--brand-light);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    padding: 14px;
    margin-top: -6px;
    background: var(--paper);
}
/* Dins d'un pop-up ja hi ha el marc i el coixí: aquí només és el contingut */
.modal .camp-editor {
    border: 0;
    padding: 0;
    margin-top: 0;
    background: transparent;
}

/* Treure l'apartat: separat de Desar, i a baix de tot, perquè no es premi
   volent prémer l'altre */
.modal-perill {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px dashed var(--border);
}
.modal-perill[hidden] { display: none; }
.modal-perill .btn { margin-top: 0; }
/* La barra de sota de l'editor: tancar sense desar a l'esquerra i desar a la
   dreta, cadascun a la seva punta, que no es premi l'un volent prémer l'altre */
.camp-cos-accions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
}
.camp-cos-dreta {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}
.camp-cos-accions .btn { margin-top: 0; }

@media (max-width: 640px) {
    .camp-mena { flex-basis: 100%; }
    .camp-num { display: none; }
}

.pregunta-vista {
    position: relative;
    margin-top: 10px;
    padding: 10px 14px 14px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    background: var(--paper);
}
/* És una mostra, no un formulari: qui hi escrivís no desaria res */
.pregunta-vista .ins-graella { pointer-events: none; }
.pregunta-vista .ins-camp > .ins-etiqueta { margin-top: 6px; }
.pregunta-vista-marca {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.preguntes-fetes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 8px;
    margin: 10px 0 4px;
}
.pregunta-feta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.pregunta-feta:hover { border-color: var(--brand-light); background: var(--paper); }
.pregunta-feta-grup {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}
.pregunta-feta-nom { font-weight: 600; font-size: 0.87rem; }
.pregunta-feta-mena { font-size: 0.78rem; color: var(--muted); }

/* La clau que ja es fa servir en altres activitats: el que la família s'hi
   trobarà contestat, dit allà on es pot trencar sense adonar-se'n */
.pregunta-compartida { color: var(--brand-dark); }

.preguntes-daltres { margin-top: 10px; }
.preguntes-daltres > summary {
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--brand-dark);
    padding: 4px 0;
}
.preguntes-daltres .preguntes-fetes { max-height: 340px; overflow-y: auto; }

/* Un retoc que la mena de resposta triada no admet no s'ensenya */
[data-si-dur][hidden] { display: none; }

/* ---------- Avisos del tauler de la família ----------
   El que han de saber abans de res, a dalt de tot i abans dels seus fills/es.
   El to el diu què és: informació de l'esplai, una cosa a completar, o diners
   pendents. La forma és sempre la mateixa perquè es llegeixin d'una tirada. */

.avisos {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 18px;
}

.avis {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--radius);
    border-left: 4px solid transparent;
    font-size: 0.95rem;
    line-height: 1.5;
}

.avis-icona { flex: 0 0 auto; margin-top: 2px; opacity: 0.85; }
.avis-icona svg { display: block; }
.avis-text { min-width: 0; }
.avis-text a { color: inherit; font-weight: 700; }

.avis-info {
    background: var(--mena-bg);
    color: var(--mena-ink);
    border-left-color: var(--mena-ink);
}
.avis-avis {
    background: var(--warning-bg);
    color: var(--warning-ink);
    border-left-color: var(--warning-ink);
}
.avis-perill {
    background: var(--danger-bg);
    color: var(--danger);
    border-left-color: var(--danger);
}

/* ---------- Dades breus de la família ----------
   Qui són i com se'ls truca: el nom, i una línia per persona. Prou curt per
   fer-hi un cop d'ull i adonar-se que hi falta un telèfon. */

.dades-persones {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: persona;
}
.dades-persones > li {
    counter-increment: persona;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 10px 0 10px 30px;
    position: relative;
    border-top: 1px solid var(--border);
    font-size: 0.93rem;
}
.dades-persones > li:first-child { border-top: none; }
/* El nombre de la persona, centrat amb la seva linia (i no penjat de dalt) */
.dades-persones > li::before {
    content: counter(persona);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--brand-pale);
    color: var(--brand-dark);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

/* Nom, correu i telefon: cadascun amb el seu dibuix, tots a la mateixa alcada */
.dades-persona-nom,
.dades-persona-dada {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.dades-persona-nom { font-weight: 700; }
.dades-persona-nom svg { color: var(--brand-dark); flex: 0 0 auto; }
.dades-persona-dada svg { color: var(--brand-light); flex: 0 0 auto; }
.dades-persona-dada { color: var(--muted); word-break: break-word; }
.dades-persona-dada a { color: inherit; text-decoration: none; }
.dades-persona-dada a:hover { color: var(--brand-dark); text-decoration: underline; }

/* El carnet de família nombrosa o monoparental, quan n'hi ha: una línia sota
   les persones, amb el mateix aire discret que les seves dades. */
.dades-familia-carnet {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 0.9rem;
}
.dades-familia-carnet svg { color: var(--brand-light); flex: 0 0 auto; }

/* ---------- El bloc de les dades de la família ----------

   Dos apartats amb una ratlla al mig i un llapis cadascun: QUI SOU (els noms,
   els correus amb què s'entra al portal i els seus telèfons) i LA RESTA DEL
   COMPTE (on viviu, els altres telèfons, el carnet). Van separats perquè no es
   canvien mai alhora —un correu, el dia que es canvia de correu; una adreça,
   el dia d'una mudança— i perquè així qui ve a escriure l'adreça no ha de
   tornar a passar per damunt dels correus. */

.dades-familia-titol {
    margin: 0 0 4px;
    font-size: 1.15rem;
}

.dades-bloc { padding-top: 12px; }
/* La ratlla la porta el segon i no pas el primer: així no n'hi ha cap de
   penjada sota el títol quan el bloc només en dugués un. */
.dades-bloc-segon {
    margin-top: 4px;
    border-top: 1px solid var(--border);
}

/* El títol de l'apartat i el seu llapis, a banda i banda. El llapis és petit i
   discret: el que s'ha de llegir és el que hi ha escrit a sota, no el botó. */
.dades-bloc-cap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.dades-bloc-cap h3 {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

/* La resta del compte: una línia per cosa, amb el seu dibuix al davant, igual
   que les persones de sobre. El que no hi ha escrit no hi surt: una llista de
   guionets no diu res que no digui millor el que es reclama al peu. */
.dades-llar {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dades-llar li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
}
.dades-llar svg { color: var(--brand-light); flex: 0 0 auto; }
/* Un telèfon i el carnet són enllaços perquè s'hi pugui prémer, no pas perquè
   s'hagin de llegir com a enllaços: aquí el que es llegeix és el número. */
.dades-llar a { color: inherit; text-decoration: none; }
.dades-llar a:hover { text-decoration: underline; }
.dades-llar-buit {
    margin: 0;
    font-size: 0.92rem;
    color: var(--muted);
    font-style: italic;
}

/* El que falta del compte, al peu de tot: és l'únic lloc on la família se
   n'assabentaria, perquè el que no hi ha escrit no s'enumera enlloc. */
.dades-familia-peu {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.9rem;
}
.dades-familia-peu strong { color: var(--ink); }

/* Els camps, agrupats per persona: el formulari es llegeix igual que el bloc.
   Van dins d'un pop-up i, per tant, ajustats: el que hi ha d'entrar és curt i
   s'ha de poder veure sencer sense fer-lo baixar. */
.dades-persona-camps {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--paper);
    padding: 12px 14px 14px;
    margin: 14px 0 12px;
}
/* El títol del bloc, DINS del quadre i no pas partint-ne la vora: una legenda
   a mitja línia queda estranya. El `float` la treu del forat que el navegador
   li fa a la vora i la deixa caure a dins com un títol qualsevol. */
.dades-persona-camps legend {
    float: left;
    width: 100%;
    padding: 0;
    margin: 0 0 8px;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--brand-dark);
}
.dades-persona-camps legend ~ * { clear: both; }

/* La línia d'ajuda del bloc: hi és, però no ha de fer més gruix que un renglo */
.dades-persona-nota { margin: 0 0 10px; }

/* Dues caselles curtes de la mateixa persona (el correu i el telèfon), una al
   costat de l'altra. A mòbil no hi caben: tornen a caure una sota l'altra. */
.camps-parella {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
}
.camps-parella > div { min-width: 0; }

/* Dins l'edició de la llar, els telèfons de reserva comencen després de les
   dades generals. Cada número i la persona o lloc a qui correspon formen una
   parella estable, també quan la resta de la graella deixa una casella lliure. */
.dades-llar-telefon-inici,
.dades-llar-telefons {
    grid-column: 1 / -1;
}
.dades-llar-separador {
    border-top: 1px solid var(--border);
    margin-top: 8px;
}
.dades-llar-telefons-ajuda {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 0.9rem;
}
.dades-llar-telefons {
    display: grid;
    gap: 12px;
}
.dades-llar-telefon-parella {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.dades-llar-telefon-parella > .ins-camp { min-width: 0; }

@media (max-width: 560px) {
    .camps-parella { grid-template-columns: 1fr; }
    .dades-llar-telefon-parella { grid-template-columns: 1fr; }
}

/* ---------- El formulari de l'avís ---------- */
.form-avis [data-avis-camp][hidden] { display: none; }
.form-avis textarea { margin-bottom: 0; }

/* ---------- El codi d'accés del correu ----------
   Sis xifres que s'escriuen mirant el mòbil: grosses, separades i en una
   tipografia on el zero i la o no s'assemblin. */

.camp-codi {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.5rem;
    letter-spacing: 0.35em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.camp-codi::placeholder { letter-spacing: 0.35em; opacity: 0.35; }

/* ---------- Les vostres dades: el resum i el botó de llegir-ho tot ----------
   El botó va al costat del text i no pas a sota: el resum és curt i, si el
   botó cau a sota de tot, queda fora d'on es mira. En pantalla estreta la
   fila es desfà i el botó torna a sota, que és l'únic que hi cap. */

.dades-fila {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.dades-fila p { margin: 0; flex: 1 1 280px; }
.dades-fila .btn { flex: 0 0 auto; }

/* ---------- A quin correu arriben (/preferencies) ----------
   Una casella per adreça: la família tria si arriben a una o a totes dues
   (includes/families/preferencies.php). */

.llista-adreces {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
}
.llista-adreces li {
    padding: 10px 14px;
}
.llista-adreces li + li { border-top: 1px solid var(--border); }
.adreca-correu {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    word-break: break-word;
}
.adreca-correu svg { flex: 0 0 auto; color: var(--muted); }
.adreca-tria {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    cursor: pointer;
}
.adreca-tria input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--brand-dark);
}
.adreca-tria input:disabled { cursor: default; }
.adreca-tria > span { min-width: 0; }
.adreca-qui {
    display: block;
    margin-top: 2px;
    padding-left: 23px;
    color: var(--muted);
    font-size: 0.9rem;
}

/* ---------- Llegir un correu abans d'enviar-lo (/admin/correu) ---------- */

.correu-titolet {
    margin: 22px 0 6px;
    font-size: 1rem;
}

/* El correu tal com arribarà: dins d'un marc de paper, perquè es vegi que
   allò no és la pàgina del panell sinó el que rebrà la família. */
.correu-mostra {
    border: 1.5px solid var(--border);
    border-radius: 12px;
    background: var(--paper);
    padding: 4px 18px 14px;
}
.correu-mostra-assumpte {
    margin: 12px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    font-size: 0.92rem;
    color: var(--muted);
}
/* Els enllaços que porten els correus són llarguíssims (hi va el testimoni
   sencer): sense partir-los se'n van fora del quadre. */
.correu-mostra-cos { font-size: 0.95rem; overflow-wrap: anywhere; }
.correu-mostra-cos p { margin: 0 0 12px; }
.correu-mostra-cos ul { margin: 0 0 12px; padding-left: 20px; }

/* Qui el rebrà, amb nom i adreça. Si són seixanta, la llista fa el seu propi
   scroll: el botó d'enviar no ha de quedar a dues pantalles d'aquí. */
.correu-destinataris {
    max-height: 190px;
    overflow-y: auto;
    margin: 0;
    padding: 10px 10px 10px 28px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--paper);
    font-size: 0.9rem;
    color: var(--muted);
}
.correu-destinataris li { margin: 2px 0; }

/* La tria d'a qui va la tanda, a /admin/correu. Files grosses i clicables
   senceres: aquí s'hi decideix qui rep un correu, i no és el lloc de fer
   puntería amb un rodonet de 13 px. */
.tria-enviament {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tria-opcio {
    display: flex;
    align-items: flex-start;
    /* El d'una altra .tria-opcio (la del menú d'activitats, més amunt) és
       space-between: sense tornar-lo a l'inici, una opció amb el text curt
       quedava empesa a la dreta i desquadrada de la del costat. */
    justify-content: flex-start;
    gap: 11px;
    margin: 0;
    padding: 11px 13px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--paper);
    cursor: pointer;
}
.tria-opcio:hover { border-color: var(--brand-light); }

/* La triada es veu triada d'una ullada: si costa de dir quina està marcada,
   el selector no serveix de res. */
.tria-opcio:has(input:checked) {
    border-color: var(--brand-dark);
    box-shadow: inset 0 0 0 1px var(--brand-dark);
}

.tria-opcio input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    flex: 0 0 auto;
    cursor: pointer;
    accent-color: var(--brand-dark);
}

.tria-text { display: block; min-width: 0; }
.tria-nom { display: block; font-weight: 700; font-size: 0.95rem; }
.tria-ajuda {
    display: block;
    color: var(--muted);
    font-size: 0.87rem;
    margin-top: 2px;
}

/* L'excepció (escriure a qui ho té apagat) no es dissimula: quan està marcada
   es veu que s'està fent una cosa que no és la de cada dia. */
.tria-opcio-excepcio:has(input:checked) {
    border-color: var(--danger);
    box-shadow: inset 0 0 0 1px var(--danger);
    background: var(--danger-bg);
}
.tria-opcio-excepcio:has(input:checked) .tria-ajuda { color: var(--danger); }

/* ============================================================
   MODE NOMÉS LECTURA (monitors)

   Tothom entra al panell en mode visual. El <body> porta la classe "lectura"
   fins que aquella persona activa expressament el mode edició des de
   Configuració; aleshores pot veure i fer servir els controls de canvi.

   Això és comoditat i no pas seguretat: qui de debò atura les accions és el
   servidor, a exigeix_panell_i_edicio() (includes/acces/panell.php). Aquí només s'estalvia el
   disgust de clicar un botó que hauria de dir que no.
   ============================================================ */

/* Els botons i enllaços que són una acció i viuen fora de cap formulari
   («+ Afegir…», el llapis d'editar, els menús de gestió) es marquen a mà */
.lectura .nomes-admin { display: none !important; }

/* Tot el que va dins d'un formulari que escriu: es continua veient el que hi
   ha desat, però no s'hi pot prémer ni escriure res. Un formulari marcat amb
   data-lectura en queda exclòs; ara mateix no n'hi ha cap, però el ganxo es
   deixa posat per si algun dia un monitor/a ha de poder desar alguna cosa. */
.lectura main form[method="post"]:not([data-lectura]) .btn,
.lectura main form[method="post"]:not([data-lectura]) button,
.lectura main form[method="post"]:not([data-lectura]) .icon-btn { display: none; }
/* Amagar-ne els botons deixava el marc de les pastilles buit: una càpsula de
   dos dits sense res a dins, i encara més visible d'ençà que la tria va a la
   dreta de l'enunciat. Fora el marc també. */
.lectura main form[method="post"]:not([data-lectura]) .pastilles { display: none; }
/* «Tria un fitxer» és un botó del navegador que no s'apaga amb el gris de
   sota, i semblava que es pogués pujar el full: fora, com els altres botons */
.lectura main form[method="post"]:not([data-lectura]) input[type="file"] { display: none; }

.lectura main form[method="post"]:not([data-lectura]) input,
.lectura main form[method="post"]:not([data-lectura]) select,
.lectura main form[method="post"]:not([data-lectura]) textarea {
    pointer-events: none;
    background: var(--paper);
    color: var(--muted);
}

/* El commutador és a Configuració perquè no es pugui activar per accident des
   d'una pantalla on un botó de desar o d'eliminar queda massa a mà. */
.mode-edicio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}
.mode-edicio-text { min-width: 0; }
.mode-edicio-pastilla {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--paper);
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}
.mode-edicio-pastilla svg { flex: none; }
.mode-edicio-pastilla-actiu {
    border-color: var(--brand-light);
    background: var(--brand-pale);
    color: var(--brand-dark);
}
.mode-edicio p { margin: 4px 0 0; color: var(--muted); }
.mode-edicio form { flex: 0 0 auto; }
.mode-edicio-interruptor {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    width: 196px;
    min-height: 40px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--soft);
    color: var(--muted);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}
.mode-edicio-interruptor:hover { border-color: var(--brand-dark); }
.mode-edicio-interruptor:focus-visible {
    outline: 3px solid rgba(20, 99, 47, .28);
    outline-offset: 2px;
}
.mode-edicio-opcio {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 32px;
    transition: color .2s;
}
.mode-edicio-opcio svg { flex: none; }
.mode-edicio-punt {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 5px);
    border-radius: 999px;
    background: var(--paper);
    box-shadow: 0 1px 3px rgba(22, 36, 26, .16);
    transition: transform .22s ease, background-color .22s;
}
.mode-edicio-interruptor-actiu {
    border-color: var(--brand-light);
    background: var(--brand-pale);
}
.mode-edicio-interruptor-actiu .mode-edicio-opcio-visual { color: var(--muted); }
.mode-edicio-interruptor-actiu .mode-edicio-opcio-edicio { color: var(--brand-dark); }
.mode-edicio-interruptor-actiu .mode-edicio-punt {
    transform: translateX(100%);
    background: #fff;
}
@media (max-width: 560px) {
    .mode-edicio { align-items: stretch; flex-direction: column; }
    .mode-edicio-interruptor { width: 100%; }
}


/* ====================================================================
   El portal des de fora: mòbil, teclat i les dades que es copien

   Tot això és de les pàgines de la família. El panell hi passa pel mig
   (el salt al contingut, el focus) però qui ho demanava és qui entra al
   portal un cop l'any, des del telèfon, i no pot equivocar-se.
   ==================================================================== */

/* ---------- Saltar-se la barra ----------
   Només existeix per a qui va amb teclat: fins que no té el focus, no ocupa
   ni un píxel de la pàgina. */

.salta-contingut {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 10px 16px;
    background: var(--card);
    color: var(--brand-dark);
    font-weight: 700;
    text-decoration: none;
    border: 2px solid var(--brand-dark);
    border-radius: 0 0 var(--radius) 0;
}
.salta-contingut:focus {
    left: 0;
}

/* ---------- El focus del teclat ----------
   Els camps es marcaven només canviant el color de la vora, i sobre un fons
   clar això gairebé no es veu. Amb :focus-visible el ratolí no en veu res i
   qui va amb tabulador sap sempre on és. */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
form input:focus-visible,
form select:focus-visible,
form textarea:focus-visible {
    /* Només la marca de fora: tocar el border-radius aquí faria que el botó
       canviés de forma en rebre el focus */
    outline: 2px solid var(--brand-dark);
    outline-offset: 2px;
}
/* Sobre la capçalera verda el verd fosc no es veu: allà la marca va blanca */
.site-header a:focus-visible { outline-color: #ffffff; }

/* ---------- Un fill/a assenyalat ----------
   S'hi arriba des del full, de la fitxa i de la pàgina de pagament, tots amb
   #fill-N. Sense marge, la targeta queda enganxada al capdamunt de la
   finestra; sense la marca, no se sap quina de les quatre és. */

.child-card { scroll-margin-top: 20px; }
.child-card:target {
    box-shadow: 0 0 0 2px var(--brand-light);
    border-color: var(--brand-light);
}

/* ---------- Botó que crida ----------
   El mateix botó de sempre, però ple: es fa servir quan allò no és una
   drecera sinó el que la família ha de fer ara. */

.icon-btn-crida {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #ffffff;
}
.icon-btn-crida:hover {
    background: var(--brand-dark-hover);
    border-color: var(--brand-dark-hover);
}

/* ---------- Què queda per acabar ----------
   Els papers que encara no tenim d'una inscripció. Abans això només es veia
   l'estona de després de desar el full. */

.child-tasques {
    margin-top: 10px;
    padding: 12px 15px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--warning-ink);
    border-radius: 10px;
    background: var(--card);
    font-size: 0.9rem;
}
.child-tasques-titol {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 8px;
}
.child-tasques-titol svg { flex: none; color: var(--warning-ink); }

/* De quina inscripció són els papers de sota */
.child-tasques-que {
    margin: 10px 0 4px;
    font-weight: 700;
    color: var(--brand-dark);
}
.child-tasques-que:first-of-type { margin-top: 0; }

.llista-tasques {
    list-style: none;
    margin: 0;
    padding: 0;
}
.llista-tasques li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 3px 0;
    line-height: 1.45;
}
.tasca-marca {
    flex: none;
    width: 1.1em;
    font-weight: 700;
    text-align: center;
}
.tasca-feta { color: var(--muted); }
.tasca-feta .tasca-marca { color: var(--success); }
.tasca-feta small { font-style: italic; }
.tasca-pendent .tasca-marca { color: var(--warning-ink); }

.child-tasques-com {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 0.85rem;
}

/* El següent pas, sota la insígnia. Va en el to del que queda per fer i no pas
   en gris com la resta de lletra petita: és l'única línia de la fila que
   demana alguna cosa, i si es confon amb el detall no la llegeix ningú. */
.passa-seguent {
    display: inline-block;
    margin-top: 3px;
    color: var(--warning-ink);
    font-weight: 600;
    line-height: 1.35;
}
/* El termini no crida tant com la feina: primer què han de fer, i després fins
   quan. Al revés, la data se'ls menja la frase. */
.passa-termini { font-weight: 500; opacity: 0.85; white-space: nowrap; }

/* ---------- Dades per copiar ----------
   El compte i el concepte de la transferència: es piquen a l'app del banc i
   és on més gent s'equivoca. */

.copia-dada {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 0 0 8px;
}
.copia-dada:last-child { margin-bottom: 0; }

.copia-etiqueta {
    flex: none;
    min-width: 72px;
    color: var(--muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
}
.copia-valor {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card);
    color: var(--ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9rem;
    /* Un IBAN no s'ha de partir enmig; si no hi cap, que es desplaci ell */
    overflow-x: auto;
    white-space: nowrap;
}
.icon-btn-copiar { flex: none; }
/* El concepte de la transferència és text: al mòbil, tallat i amb barra de
   desplaçament no es veia sencer. Aquest sí que es pot partir. */
.copia-valor-text { white-space: normal; overflow-wrap: anywhere; }
/* Un IBAN són 29 caràcters: a 390px, amb la mida de sempre, se'n perdien els
   últims darrere la barra de desplaçament. Una mica més petit hi cap sencer. */
@media (max-width: 420px) {
    .copia-valor { font-size: 0.8rem; padding: 6px 8px; }
}
.icon-btn-fallat {
    background: var(--danger-bg);
    border-color: var(--danger);
    color: var(--danger);
}

/* ---------- La taula d'activitats, al mòbil ----------
   Quatre columnes no caben en un telèfon, i deixar-la desplaçar-se de costat
   vol dir que els botons (que és el que s'hi ve a fer) queden amagats. Per
   sota d'aquesta amplada cada fila es desplega en una fitxa: el nom de
   l'activitat fa de títol i la resta de dades porten al davant el que abans
   deia la capçalera de la columna (el data-etiqueta del PHP). */

/* Ordenar des del mòbil. Va amagat perquè, mentre la capçalera de la taula es
   vegi, ja s'ordena clicant-la i dos llocs per fer el mateix només confonen.
   S'ensenya just on la capçalera desapareix, més avall, al mateix trencament
   que munta les fitxes. El pinta llista_ordre_mobil_html() (includes/panell/llistes.php). */
.ordre-mobil { display: none; }

@media (max-width: 640px) {
    .taula-ampla { overflow-x: visible; }

    .ordre-mobil {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin: 0 0 14px;
    }
    .ordre-mobil > label {
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--muted);
    }
    .ordre-mobil-camps { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
    /* La columna mana i el sentit l'acompanya: el nom de la columna és el que
       es llegeix primer i el que costa més d'encertar en una llista llarga. */
    .ordre-mobil-camps select { flex: 1 1 0; min-width: 0; margin: 0; }
    /* Amb JavaScript el desplegable ja s'envia sol en triar (assets/cerca-taula.js)
       i el botó només seria una passa de més; sense, és l'única manera d'aplicar-ho.
       Va en una ratlla per ell perquè, al costat, escanyava els dos desplegables
       fins a deixar-hi «Naixemer» i «Els p». */
    .ordre-mobil-boto { flex: 1 0 100%; }
    .ordre-mobil.amb-js .ordre-mobil-boto { display: none; }

    .taula-fitxes,
    .taula-fitxes tbody,
    .taula-fitxes tr,
    .taula-fitxes td { display: block; width: 100%; }

    /* La capçalera no fa cap falta: cada dada ja diu què és */
    .taula-fitxes thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .taula-fitxes tr {
        margin-bottom: 10px;
        padding: 12px 14px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--card);
    }
    .taula-fitxes tr:last-child { margin-bottom: 0; }

    .taula-fitxes td {
        padding: 3px 0;
        border-bottom: none;
    }

    /* El nom de l'activitat és el títol de la fitxa */
    .taula-fitxes .cel-activitat {
        padding-bottom: 7px;
        font-weight: 700;
        font-size: 1rem;
    }

    /* La resta, amb el nom de la columna al davant.
       L'etiqueta va ancorada i no pas en una graella: dins d'una cel·la hi ha
       un <br> i un <small> a sota de la insígnia (la data del pagament, els
       papers que falten), i amb flex cada tros es convertiria en una columna
       seva i se n'aniria al costat en comptes de a sota. */
    /* L'amplada de l'etiqueta era pensada per a «Preu» i «Estat» (una paraula
       curta): al panell hi ha etiquetes de tres i quatre paraules («Al·lèrgies
       / observacions», «Compte bancari»), que amb 62px no hi càpiguen i es
       desborden cap a la dada. Més ample i amb el seu propi line-height (el
       de la resta de la fitxa és 1.55 i les feia altíssimes) es queden en com
       a molt dues línies, i el min-height els deixa lloc sense que calgui
       saber per endavant si l'etiqueta d'aquella columna en necessita una o
       dues. */
    /* En fitxa no hi ha columnes: el contingut va a l'esquerra, arran de la
       seva etiqueta (a l'ample, en canvi, tot va centrat: mira «Taules») */
    .taula-fitxes th,
    .taula-fitxes td { text-align: left; }
    .taula-fitxes td .accions-fila,
    .taula-fitxes td .cel-badges,
    .taula-fitxes td .cel-fills,
    .taula-fitxes td .cel-inscripcions,
    .taula-fitxes td .cel-infant,
    .taula-fitxes td .pagament-accio { justify-content: flex-start; }
    .taula-fitxes td .cel-convit { align-items: flex-start; }

    .taula-fitxes td[data-etiqueta] {
        position: relative;
        padding-left: 104px;
        min-height: 2.3em;
    }
    .taula-fitxes td[data-etiqueta]::before {
        content: attr(data-etiqueta);
        position: absolute;
        left: 0;
        top: 0.25em;
        width: 92px;
        line-height: 1.25;
        color: var(--muted);
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        font-weight: 600;
    }
    .taula-fitxes .cel-preu { text-align: left; }
    /* L'estat és una insígnia i dues o tres frases (què vol dir, què cal fer i
       fins quan): al costat de l'etiqueta quedaven en una columna tan estreta
       que cada frase feia quatre línies. Aquí l'etiqueta va a sobre. */
    .taula-fitxes td.cel-estat[data-etiqueta] { padding-left: 0; }
    .taula-fitxes td.cel-estat[data-etiqueta]::before {
        position: static;
        display: block;
        width: auto;
        margin-bottom: 4px;
    }
    /* Les que encara no han obert no tenen cap acció: sense això la fitxa
       acabava amb una ratlla i un guió sol */
    .taula-fitxes .fila-per-obrir .cel-accions { display: none; }
    /* Les columnes de recompte (Fills, Inscripcions...) centraven el número
       sota la capçalera; aquí la capçalera no hi és, i centrar-lo dins d'una
       caixa que ja comença 104px cap a la dreta el separava massa de la seva
       etiqueta. */
    .taula-fitxes .cel-centre { text-align: left; }

    /* #taula-families (/admin/families) ja tenia el seu propi pla per a
       pantalla estreta: amplada mínima fixa i desplaçament de costat,
       amagant Inscripcions abans que la resta. Amb .taula-fitxes la taula
       passa a fitxes senceres i aquell mínim de 760/640px només li faria fer
       amples les fitxes igual que abans. L'amagat d'Inscripcions es queda:
       ja era la columna que menys es mira des d'aquí (es veu a la fitxa de
       la família) i seguir-la amagant no perd res. */
    #taula-families.taula-fitxes {
        min-width: 0;
        table-layout: auto;
    }

    /* Els botons, amples i a sota de tot: és el que s'hi ve a prémer. La
       taula d'activitats (l'única que ja tenia .taula-fitxes) marca la seva
       columna d'accions amb .cel-accions, però a la resta de taules del
       panell la columna d'accions no en du cap classe pròpia -- l'única cosa
       certa és que sempre és l'última de la fila. Per això la regla val per
       totes dues coses alhora; la fila que només diu "Possibles avisos"
       (avisos.php) no és cap fila de dades i en queda fora expressament. */
    .taula-fitxes .cel-accions,
    .taula-fitxes tr:not(.fila-separadora) > td:last-child {
        margin-top: 9px;
        padding-top: 10px;
        border-top: 1px solid var(--border);
        text-align: left;
    }
    /* .accions-taula és de la taula d'activitats; a la resta del panell la
       mateixa fila de botons es diu .accions-fila. Els quadrats d'icona sols
       (.accions-icones, a /admin/monitors) en queden fora: estirar-los faria
       una barra ampla amb una icona sola al mig i cap text, perquè el seu
       text ja hi és només per als lectors de pantalla. */
    .taula-fitxes .accions-taula,
    .taula-fitxes .accions-fila:not(.accions-icones) {
        justify-content: stretch;
        flex-wrap: wrap;
        gap: 8px;
    }
    .taula-fitxes .accions-taula .btn,
    .taula-fitxes .accions-taula .icon-btn,
    .taula-fitxes .accions-fila:not(.accions-icones) .btn,
    .taula-fitxes .accions-fila:not(.accions-icones) .icon-btn {
        flex: 1 1 auto;
        justify-content: center;
    }
    /* El botó d'arxivar/eliminar (grups.php) i el d'enviar/editar/eliminar
       (avisos.php) van dins d'un <form>: qui és realment el fill directe de
       la fila flexible és el formulari, no el botó, i és ell qui s'ha
       d'estirar perquè el botó de dins el pugui omplir. Mateix truc que
       .accions-verticals més amunt. */
    .taula-fitxes .accions-fila:not(.accions-icones) form {
        flex: 1 1 auto;
    }
    .taula-fitxes .accions-fila:not(.accions-icones) form .btn,
    .taula-fitxes .accions-fila:not(.accions-icones) form .icon-btn {
        width: 100%;
    }
}

/* ---------- Els dits no són fletxes ----------
   En un aparell sense ratolí, tot el que es prem ha de fer 44 px. A la taula
   d'activitats n'hi ha tres de seguits i, petits, es piquen malament. */

@media (pointer: coarse) {
    .icon-btn,
    .btn,
    .site-header nav a {
        min-height: 44px;
    }
    .icon-btn, .btn { align-items: center; }

    /* Els quadrats del panell es queden com són: allà hi van en graella i
       fer-los créixer els desmuntaria la fila */
    .accions-icones .icon-btn,
    .accions-icones .btn { min-height: 34px; }

    /* Però el dit sí que hi ha d'encertar. Els botons petits (els quadrats
       d'icona, la creu dels pop-ups i la de la cerca, les fletxes d'ordenar i
       el commutador Visual/Edició) es veuen igual, i una capa invisible al
       voltant fa que responguin en 44 × 44 px. Centrada amb translate, que
       l'iOS 12 entén, i no amb inset. */
    /* L'interruptor del portal (Obert/Tancat), el del mode edició i el plec
       «Com ha de ser el full» de la configuració: també s'hi ha d'encertar */
    .pastilla,
    .mode-edicio-interruptor { min-height: 44px; }
    .config-plec > summary { padding: 12px 0; }

    .accions-icones .icon-btn,
    .accions-icones .btn,
    .modal-tanca,
    .btn-fletxa,
    .commutador-mode-boto { position: relative; }
    .accions-icones .icon-btn::after,
    .accions-icones .btn::after,
    .modal-tanca::after,
    .btn-netejar-cerca::after,
    .btn-fletxa::after,
    .commutador-mode-boto::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        min-width: 44px;
        min-height: 44px;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
}


/* ---------- Pàgines de text llarg: la privacitat i les galetes ---------- */

/* Un text legal no es fulleja, es llegeix seguit. La columna s'estreny a la
   mida on l'ull no es perd de línia, i els apartats van més separats entre ells
   que les línies de dins, que és el que fa que se'n vegi l'esquelet d'una
   ullada sense haver de llegir-ho tot. */
.text-legal {
    max-width: 46rem;
    line-height: 1.65;
}
.text-legal h2 {
    margin: 34px 0 10px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    font-size: 1.1rem;
}
/* El primer apartat va enganxat a la introducció: la ratlla hi sobra */
.text-legal h2:first-of-type { border-top: 0; padding-top: 0; }
.text-legal p { margin: 0 0 12px; }
.text-legal ul { margin: 0 0 12px; padding-left: 22px; }
.text-legal li { margin-bottom: 7px; }
.text-legal th {
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
    padding-right: 14px;
}
/* Al mòbil les taules d'aquí no es despleguen en fitxes com les de les
   activitats, i el `overflow-x: visible` que aquelles demanen (més avall)
   feia que el nom de l'entitat, el correu o el nom d'una galeta empenyessin
   la pàgina sencera cap a la dreta. Aquí el text es parteix on calgui. */
@media (max-width: 640px) {
    .text-legal th { white-space: normal; padding-right: 8px; }
    .text-legal th, .text-legal td { word-break: break-word; overflow-wrap: anywhere; }
}
.text-legal code {
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 0.88em;
}

.legal-data {
    color: var(--muted);
    font-size: 0.88rem;
    margin-bottom: 18px !important;
}

/* El que encara falta d'omplir. Es veu de lluny i a posta: aquests forats són
   les dades de l'entitat, i una política de privacitat publicada amb un
   «[NIF]» a dins no val de res. Quan estiguin tots plens, aquesta regla es pot
   esborrar (o quedar-s'hi, que no fa nosa si no hi ha res que la faci servir). */
.per-omplir {
    background: #fff3cd;
    border: 1px dashed #b8860b;
    border-radius: 4px;
    padding: 1px 6px;
    color: #7a5c00;
    font-weight: 600;
}

/* ---------- El número de famílies que obre la llista ----------
   A /admin/avisos, cada avís diu a quantes famílies va. Els noms no hi són:
   amb seixanta cases, la taula deixava de ser una taula i el que s'hi ve a
   mirar quedava enterrat. El número és un botó i la llista és a un clic
   (includes/vistes/modal_families.php). Sembla un enllaç perquè es pugui endevinar
   que s'hi pot prémer, però no ho és: no porta enlloc, obre un pop-up. */

.btn-comptador {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 2px 8px;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--paper);
    font: inherit;
    font-size: 0.9rem;
    color: var(--brand-dark);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.btn-comptador:hover { background: var(--brand-pale); border-color: var(--brand-light); }
.btn-comptador strong { font-weight: 700; }

/* La llista de dins del pop-up. Si són seixanta, es fa el seu propi scroll:
   el botó de tancar no ha de quedar a dues pantalles d'aquí. */
.llista-families {
    max-height: 46vh;
    overflow-y: auto;
    margin: 0;
    padding: 10px 12px;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--paper);
}
.llista-families li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 6px 2px;
    border-bottom: 1px solid var(--border);
}
.llista-families li:last-child { border-bottom: 0; }
.llista-families small { font-size: 0.85rem; }


/* ---------- Els dos passos de /admin/correu ----------
   Escriure'l i llegir-lo abans d'enviar-lo. Es veuen tots dos sempre: qui és
   al primer ha de saber que encara no ha enviat res, i qui és al segon, que
   del text ja no se n'ha de tornar a preocupar. */

.correu-passos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    font-size: 0.9rem;
    color: var(--muted);
}
.correu-passos li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 13px 6px 7px;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    background: var(--paper);
}
.correu-passos .pas-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: var(--border);
    color: var(--ink);
    font-weight: 700;
    font-size: 0.8rem;
}
/* El pas on som es veu on som d'una ullada: si costa de dir-ho, el rastre no
   serveix de res i només fa nosa a dalt de la pantalla. */
.correu-passos .pas-actual {
    border-color: var(--brand-dark);
    background: var(--card);
    color: var(--brand-dark);
    font-weight: 600;
}
.correu-passos .pas-actual .pas-num {
    background: var(--brand-dark);
    color: #fff;
}

/* ---------- La taula de tots els avisos (/admin/avisos) ----------
   Sense amplades, el navegador donava la meitat de la taula a la nota que
   explica què fa el botó de correu i deixava el text de l'avís —que és el que
   s'hi ve a llegir— en una columna de quatre paraules per línia. */

/* Tipus, destinataris i data van a l'1% (amb un mínim): així totes les
   columnes queden al just i el que sobra se l'emporta el text de l'avís, també
   en mode edició. Amb amplades en px, l'algorisme de la taula repartia el
   sobrant i «Fins quan» quedava ampla mentre l'avís anava a cinc línies. */
.taula-avisos .col-tipus { width: 1%; min-width: 108px; }
.taula-avisos .col-fins  { width: 1%; min-width: 112px; }
/* El text de l'avís no porta amplada: és la columna que s'emporta l'espai que
   sobra. Amb un 32% fix, en mode visual (sense la columna d'accions) tot el
   sobrant anava a «Qui el rep» i quedava un forat al mig de la fila. El mínim
   és perquè, en una pantalla estreta i en mode edició, no quedi en una
   paraula per línia. */
/* En px i no en em: el títol de columna va amb lletra petita i 16em hi
   donava 200px, que en mode edició deixava l'avís en cinc línies. */
.taula-avisos .col-avis  { min-width: 260px; }
/* «Fins que ho resolguin» es pot partir: una data sense partir (.cel-data)
   s'enduia 60px que l'avís necessita més. */
.taula-avisos .cel-data  { white-space: normal; }
/* Amb els botons de la dreta que no es parteixen, era la columna que pagava:
   «Totes les famílies» acabava una paraula per línia. */
.taula-avisos .col-qui   { width: 1%; min-width: 170px; }
/* La columna d'accions (només en mode edició) pren el just per als seus
   botons, que no es parteixen (.accions-fila); les notes de sota s'hi
   ajusten. L'1% és el gest de taula per dir «tan estreta com puguis». El
   títol, centrat sobre els botons. */
.taula-avisos th.cel-accions { width: 1%; text-align: center; }

/* La mena d'avís no s'ha de partir en dues línies: és una etiqueta, no una frase */
.taula-avisos .badge-automatic,
.taula-avisos .badge-manual,
.taula-avisos .badge-suggerit { white-space: nowrap; }

/* Els botons, centrats sota el títol «Accions»: arrapats a la dreta, una fila
   amb només «Editar» quedava lluny del títol. */
.taula-avisos .accions-fila { justify-content: center; }
.taula-avisos td.cel-accions { text-align: center; }

/* «Crear l'avís» dels suggerits no va dins d'.accions-fila: sense això es
   partia en dues línies. */
.taula-avisos .cel-accions .icon-btn { white-space: nowrap; }

/* El sobre amb «Últim enviat: …» just a sota. Els altres botons de la fila
   queden a l'altura del sobre, no al mig del sobre i la seva nota. */
.taula-avisos .accions-fila { align-items: flex-start; }
.taula-avisos .boto-amb-nota {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.taula-avisos .cel-accions .boto-amb-nota small {
    max-width: none;
    margin: 4px 0 0;
    font-size: 0.78rem;
}

/* La nota de sota d'un botó explica aquell botó: amb l'amplada de mitja taula
   es llegeix com un paràgraf de la pàgina i no com el que és. */
.taula-avisos .cel-accions small {
    display: block;
    max-width: 38ch;
    margin: 4px auto 0;
}

/* En mode fitxa (fins a 640px, .taula-fitxes) ja no hi ha cap final de fila a
   la dreta: arrapar-hi els botons és exactament el que .taula-fitxes evita a
   la resta de taules del panell, i la nota que els acompanya els seguia cap
   allà amb el mateix margin-left:auto. Calen les dues classes a l'selector
   perquè guanyi per especificitat a les regles de dalt, que no porten cap
   @media i s'aplicarien igual. */
@media (max-width: 640px) {
    .taula-avisos.taula-fitxes .accions-fila { justify-content: flex-start; }
    .taula-avisos.taula-fitxes .cel-accions small { margin-left: 0; }
    .taula-avisos.taula-fitxes td.cel-accions { text-align: left; }
}

/* Un avís que va a l'equip i no a cap família. El fulard el fa reconeixible
   d'una ullada, que és tot el que ha de fer: la resta ja ho diu el text. */
.badge-equip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--paper);
    color: var(--muted);
    border: 1px solid var(--border);
}

/* ---------- La ratlla dels suggerits ----------
   Els suggerits són a la mateixa taula que els avisos de debò perquè la
   pregunta és una de sola: què saben les famílies i què haurien de saber. Però
   encara no els veu ningú, i això s'ha de poder dir sense haver de llegir la
   columna de tipus: d'aquí la ratlla amb el seu títol i el fons apagat de les
   files que hi ha a sota. */

.taula-avisos .fila-separadora td {
    padding: 22px 0 8px;
    border-bottom: 2px solid var(--border);
    background: none;
}
.separadora-titol {
    display: block;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ink);
}

/* Encara no és cap avís: el fons ho diu abans que les paraules */
.taula-avisos .fila-suggerida > td { background: var(--mena-bg, var(--paper)); }

/* Verd, com una cosa que es pot fer i està a punt. La ratlla del contorn és
   discontínua perquè encara no és res: és el que el separa del verd ple de la
   pastilla d'un avís penjat de debò. */
.badge-suggerit {
    background: var(--success-bg);
    color: var(--success);
    border: 1px dashed var(--success);
}

/* Un automàtic a qui se li ha posat una data que ja ha passat: hi és, però ara
   mateix no el veu ningú. Apagat i no pas amagat, que si desaparegués de la
   taula ningú no sabria per què l'avís ja no surt. */
.taula-avisos .fila-apagada > td { opacity: 0.55; }

/* ---------- Com comença un avís automàtic ----------
   El començament el posa el portal amb les dades de cada família i no s'escriu.
   Va damunt del camp i amb la mateixa sagnia, perquè es llegeixi com el que és:
   la primera meitat de la frase que s'està acabant d'escriure a sota. */

.avis-cap {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 6px;
    padding: 8px 10px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    background: var(--paper);
    color: var(--muted);
    font-size: 0.9rem;
}
/* El `display: flex` guanyaria a la regla del navegador per a [hidden]: sense
   això, amagar-lo des del pop-up no l'amagaria. */
.avis-cap[hidden] { display: none; }

.avis-cap-nota {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ---------- Fins quan es veu un avís ----------
   Respostes, no un camp: o un dia, o mentre duri el motiu, o —només als que
   surten sols— desactivat. El calendari només surt amb la primera triada
   (assets/avisos.js). */

.avis-durada {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* El calendari va dins del mateix quadre de «Fins a un dia», sota el nom, i
   la frase que l'explica, sota el calendari. */
.avis-durada .tria-text { flex: 1 1 auto; }
.avis-durada-data { display: block; margin-top: 8px; }
.avis-durada-data[hidden] { display: none; }
.avis-durada-data input[type="date"] { margin: 0; background: var(--card); }

/* El «Desactivat» només és dels automàtics i s'amaga amb `hidden`: el
   `display: flex` de `.tria-opcio` guanya al [hidden] del navegador i sense
   això es veuria igualment. Mateix motiu que `.btn[hidden]` més amunt. */
.avis-durada .tria-opcio[hidden] { display: none; }

/* ---------- Els correus d'avui ----------
   Una barra per compte de correu (includes/correu/quota.php): quants se n'han
   enviat avui sobre quants en deixa enviar el proveïdor. Verda, groga a partir
   del 80 % i vermella quan ja no en queda cap. A /admin/correu la tanda que
   s'està a punt d'enviar s'hi afegeix ratllada. */

.quota-correu { padding: 18px 22px; }
.quota-titol { font-size: 1rem; margin: 0 0 12px; }
.quota-files {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px 28px;
}
.quota-cap {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.92rem;
    margin-bottom: 6px;
}
.quota-xifra { white-space: nowrap; font-variant-numeric: tabular-nums; }
.quota-barra {
    display: flex;
    height: 10px;
    border-radius: 5px;
    background: var(--border);
    overflow: hidden;
}
.quota-gastat { background: var(--brand-light); }
.quota-a-punt {
    background: repeating-linear-gradient(135deg, var(--brand-light) 0 4px, transparent 4px 8px);
}
.quota-alerta .quota-gastat { background: var(--warning-ink); }
.quota-alerta .quota-a-punt {
    background: repeating-linear-gradient(135deg, var(--warning-ink) 0 4px, transparent 4px 8px);
}
.quota-ple .quota-gastat { background: var(--danger); }
.quota-ple .quota-a-punt {
    background: repeating-linear-gradient(135deg, var(--danger) 0 4px, transparent 4px 8px);
}
.quota-ple .quota-xifra { color: var(--danger); font-weight: 700; }
.quota-nota { color: var(--muted); font-size: 0.82rem; margin: 5px 0 0; }
.quota-avis { margin: 14px 0 0; }
.quota-peu { color: var(--muted); font-size: 0.78rem; margin: 12px 0 0; }

/* Dins del pop-up de /admin/correu no fa de targeta: és un bloc més */
.modal .quota-correu { box-shadow: none; margin: 18px 0 0; padding: 14px 16px; }