/**
 * EduScript Butlletí — Estils principals
 *
 * Disseny modern tipus SaaS educatiu (inspirat en Reportify)
 * Paleta: Indi/Violeta sobre fons clar i càlid
 * Tipografia: Inter
 *
 * @version 1.1.0
 */

/* ═══════════════════════════════════════════════════════════════════════
   VARIABLES CSS (Design Tokens)
   ═══════════════════════════════════════════════════════════════════════ */
:root {
    /* Colors principals (paleta càlida estil Claude) */
    --es-primary: #D97757;
    --es-primary-dark: #B85C3F;
    --es-primary-light: #F7E7DE;
    --es-primary-subtle: #FBF4EF;
    --es-accent: #E0935D;
    --es-accent-warm: #E8A33D;

    /* Colors de fons */
    --es-bg: #FAF9F5;
    --es-bg-card: #FFFFFF;
    --es-bg-input: #FAF9F5;
    --es-bg-hover: #F0EDE5;

    /* Colors de text */
    --es-text: #3D3929;
    --es-text-secondary: #65604F;
    --es-text-muted: #9C9683;
    --es-text-placeholder: #857F6D;

    /* Colors d'estat */
    --es-success: #5C8A58;
    --es-success-bg: #EFF5EC;
    --es-error: #C4554D;
    --es-error-bg: #FBF0EF;
    --es-warning: #E8A33D;

    /* Bordes */
    --es-border: #E6E2D7;
    --es-border-focus: #D97757;
    --es-border-hover: #D3CDBD;

    /* Ombres */
    --es-shadow-sm: 0 1px 2px rgba(61, 57, 41, 0.05), 0 1px 3px rgba(61, 57, 41, 0.04);
    --es-shadow-md: 0 4px 16px rgba(61, 57, 41, 0.07), 0 2px 4px rgba(61, 57, 41, 0.04);
    --es-shadow-lg: 0 12px 36px rgba(61, 57, 41, 0.11), 0 4px 10px rgba(61, 57, 41, 0.05);
    --es-shadow-focus: 0 0 0 4px rgba(217, 119, 87, 0.18);
    --es-shadow-primary: 0 8px 24px rgba(217, 119, 87, 0.32);

    /* Radis */
    --es-radius-sm: 10px;
    --es-radius-md: 14px;
    --es-radius-lg: 20px;
    --es-radius-xl: 24px;
    --es-radius-pill: 999px;

    /* Transicions */
    --es-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --es-transition-slow: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);

    /* Tipografia */
    --es-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ═══════════════════════════════════════════════════════════════════════
   MODE FOSC (scoped a l'app, no a tota la pàgina de WordPress)
   Es redefineixen els mateixos tokens; tota la resta del CSS els fa servir.
   ═══════════════════════════════════════════════════════════════════════ */
.eduscript-app[data-theme="dark"] {
    --es-primary: #E89766;
    --es-primary-dark: #EFA877;
    --es-primary-light: #3B2C20;
    --es-primary-subtle: #2B2017;
    --es-accent: #E8AE5E;
    --es-accent-warm: #E8A33D;

    /* Jerarquia de superfícies: fons (més fosc) < targeta (elevada) ;
       els inputs queden enfonsats dins de la targeta. */
    --es-bg: #14110D;
    --es-bg-card: #211C15;
    --es-bg-input: #1A150F;
    --es-bg-hover: #2C261D;

    --es-text: #F2ECDE;
    --es-text-secondary: #C9BFA9;
    --es-text-muted: #968D7B;
    --es-text-placeholder: #9A9280;

    --es-success: #76AC6C;
    --es-success-bg: #1E271A;
    --es-error: #DD8077;
    --es-error-bg: #2E211E;
    --es-warning: #E8A33D;

    --es-border: #3D3528;
    --es-border-focus: #E89766;
    --es-border-hover: #564B3A;

    --es-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40), 0 1px 3px rgba(0, 0, 0, 0.30);
    --es-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.32);
    --es-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55), 0 6px 14px rgba(0, 0, 0, 0.38);
    --es-shadow-focus: 0 0 0 4px rgba(232, 151, 102, 0.28);
    --es-shadow-primary: 0 10px 28px rgba(0, 0, 0, 0.50);
}

/* Targetes amb una mica més de relleu respecte al fons fosc */
.eduscript-app[data-theme="dark"] .eduscript-card {
    border-color: #332C21;
}

/* El botó principal en fosc: degradat càlid i ombra pròpia (no la versió
   clara basada en taronja translúcid, que es perd sobre fons negre) */
.eduscript-app[data-theme="dark"] .eduscript-btn--primary {
    background: linear-gradient(120deg, #E89766, #E8AE5E);
}
.eduscript-app[data-theme="dark"] .eduscript-btn--primary:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
}

/* Ajustos puntuals on el color no surt directament d'un token */
.eduscript-app[data-theme="dark"] .eduscript-toast {
    /* En clar el fons del toast és el color de text fosc; en fosc cal un
       fons fosc propi perquè el text clar es llegeixi. */
    background: #322C23;
    color: var(--es-text);
}

.eduscript-app[data-theme="dark"] .eduscript-badge {
    /* El text del badge (primary-dark) sobre un fons fosc necessita el to clar */
    color: var(--es-primary);
}

/* La llista desplegable nativa de les <option> no hereta els colors del tema:
   cal pintar-les explícitament perquè no surtin fosques sobre fons fosc. */
.eduscript-app[data-theme="dark"] .eduscript-select option,
.eduscript-app[data-theme="dark"] .eduscript-select optgroup {
    background-color: var(--es-bg-card);
    color: var(--es-text);
}

/* ═══════════════════════════════════════════════════════════════════════
   RESET I BASE
   ═══════════════════════════════════════════════════════════════════════ */
.eduscript-app {
    position: relative;
    font-family: var(--es-font);
    color: var(--es-text);
    line-height: 1.6;
    max-width: 1150px;
    margin: 0 auto;
    padding: 32px 16px 56px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* En mode fosc, l'app pinta el seu propi fons (la pàgina de WP pot ser clara) */
.eduscript-app[data-theme="dark"] {
    background: var(--es-bg);
    border-radius: var(--es-radius-lg);
}

/* ── Aire entre la capçalera del web i l'app ─────────────────────────────
   El tema (GeneratePress) hi acumula espai: marge superior de .site-main,
   coixí de .inside-article i el paràgraf buit que wpautop deixa just abans
   del shortcode. Amb :has() ho retallem NOMÉS a les pàgines amb l'app, de
   manera que l'únic aire que hi queda és el padding-top de .eduscript-app. */
.site-main:has(.eduscript-app) {
    margin-top: 0;
}

.inside-article:has(.eduscript-app) {
    padding-top: 0;
}

.entry-content > p:has(+ .eduscript-app) {
    margin-bottom: 0;
}

.eduscript-app *,
.eduscript-app *::before,
.eduscript-app *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   CAPÇALERA (HERO)
   ═══════════════════════════════════════════════════════════════════════ */
.eduscript-hero {
    text-align: center;
    margin-bottom: 28px;
    padding: 40px 24px 36px;
    background: var(--es-bg-card);
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-xl);
    box-shadow: var(--es-shadow-md);
}

.eduscript-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--es-primary-dark);
    background: var(--es-primary-light);
    border: 1px solid rgba(217, 119, 87, 0.3);
    border-radius: var(--es-radius-pill);
    margin-bottom: 18px;
}

.eduscript-hero__badge svg {
    color: var(--es-accent);
}

.eduscript-hero__title {
    font-size: clamp(26px, 4.5vw, 38px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--es-text);
    margin-bottom: 12px;
}

.eduscript-hero__title span {
    background: linear-gradient(120deg, var(--es-primary), var(--es-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.eduscript-hero__subtitle {
    font-size: 15.5px;
    color: var(--es-text-secondary);
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════════
   TARGETES
   ═══════════════════════════════════════════════════════════════════════ */
.eduscript-card {
    background: var(--es-bg-card);
    border-radius: var(--es-radius-xl);
    box-shadow: var(--es-shadow-md);
    border: 1px solid var(--es-border);
    padding: 32px;
    margin-bottom: 24px;
    transition: var(--es-transition);
}

.eduscript-card__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 26px;
}

.eduscript-card__icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--es-primary-light);
    color: var(--es-primary);
    border-radius: var(--es-radius-sm);
    flex-shrink: 0;
}

.eduscript-card__icon--success {
    background: var(--es-success-bg);
    color: var(--es-success);
}

.eduscript-card__title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--es-text);
    flex-grow: 1;
}

/* ═══════════════════════════════════════════════════════════════════════
   FORMULARI
   ═══════════════════════════════════════════════════════════════════════ */
.eduscript-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.eduscript-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.eduscript-field-row {
    display: flex;
    gap: 18px;
    align-items: stretch;
}

.eduscript-field--half {
    flex: 1;
    min-width: 0;
}

.eduscript-field--grow {
    flex: 3;
    min-width: 0;
}

/* Fila de sota les dades de l'alumne: Avaluació (estreta, cenyida al
   contingut) + resum de la configuració, que s'endú tota la resta. */
.eduscript-field-row--config {
    flex-wrap: wrap;
    align-items: stretch;
}

.eduscript-field-row--config .eduscript-field--avaluacio {
    flex: 0 0 auto;
}

.eduscript-field-row--config .eduscript-field--config-summary {
    flex: 1 1 340px;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* ── Resum de la configuració ─────────────────────────────────────────
   És la porta principal cap a la configuració, i per això sí que destaca:
   fons i vora tenyits del color de marca. El botó de generar continua
   sent l'únic element ple de color, així que no li discuteix el paper. */
.eduscript-config-summary {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 12px;
    font-family: inherit;
    text-align: left;
    background: var(--es-primary-subtle);
    border: 1px solid var(--es-primary);
    border-radius: var(--es-radius-md);
    cursor: pointer;
    transition: var(--es-transition);
}

.eduscript-config-summary:hover {
    background: var(--es-bg-card);
    box-shadow: var(--es-shadow-sm);
}

.eduscript-config-summary:focus-visible {
    box-shadow: var(--es-shadow-focus);
    outline: none;
}

.eduscript-config-summary__chips {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.eduscript-config-chip {
    padding: 3px 9px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--es-primary-dark);
    background: var(--es-bg-card);
    border: 1px solid var(--es-border);
    border-radius: 999px;
    white-space: nowrap;
}

/* Els extres (assoliment, continguts, recomanacions) van en un xip a part i
   més apagat: són secundaris respecte de la veu i el mode. */
.eduscript-config-chip--extra {
    color: var(--es-text-muted);
    font-weight: 500;
    background: transparent;
}

.eduscript-config-summary__cta {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 700;
    color: var(--es-primary-dark);
}

/* ── Finestra de configuració ───────────────────────────────────────────
   Ampla: hi ha molt per configurar i, amb espai, cada tria es llegeix sense
   que els subtítols s'hagin de partir en tres línies. Passa dels 1150px de
   .eduscript-app a posta, perquè tapi del tot el formulari del darrere en
   comptes de deixar-ne mig pam a banda i banda. */
.eduscript-modal.eduscript-modal--config {
    max-width: 1200px;
}

.eduscript-config-scope {
    margin: 0;
}

.eduscript-config-scope__tpl {
    display: block;
    margin-top: 4px;
}

.eduscript-config-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: var(--es-bg-hover);
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-md);
}

.eduscript-config-section__title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--es-text);
}

.eduscript-config-section__hint {
    margin: -6px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--es-text-muted);
}

/* Veu i estil: els tres selectors en columnes IGUALS (graella, no flex). Amb
   graella l'amplada no depèn del contingut de cadascun, que és el que abans
   els desequilibrava: cap no s'estira per compensar els altres. Si no hi
   caben, baixen de línia mantenint-se iguals entre ells. */
.eduscript-config-section--veu {
    display: grid;
    /* Tres columnes exactes, no «auto-fit»: amb la finestra ampla hi cabien
       quatre columnes del mínim i els tres blocs n'ocupaven només tres,
       deixant un forat a la dreta. Amb repeat(3) sempre omplen la fila. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 16px;
    /* «stretch» (i no «start»): els tres blocs han de fer la mateixa alçada
       encara que un tingui etiquetes de dues línies, si no els carrils queden
       desalineats i el conjunt sembla tort. */
    align-items: stretch;
}

/* El títol i l'explicació ocupen tota la fila de sobre. */
.eduscript-config-section--veu .eduscript-config-section__title,
.eduscript-config-section--veu .eduscript-config-section__hint {
    grid-column: 1 / -1;
}

.eduscript-config-section--veu .eduscript-field {
    gap: 6px;
    height: 100%;
}

/* El carril ocupa tota l'amplada de la columna i tota l'alçada que sobra sota
   l'etiqueta: així els tres queden igual d'alts i alineats per dalt i per baix. */
.eduscript-config-section--veu .eduscript-segment {
    flex: 1;
    width: 100%;
}

/* I dins del carril, totes les opcions iguals: amb «flex: 1» a seques, una
   opció amb text llarg («A partir de frases») s'enduia més amplada que les
   altres. Amb la base a zero, el text ja no compta per repartir l'espai. */
.eduscript-config-section--veu .eduscript-segment__option {
    flex: 1 1 0;
}

/* En pantalla estreta, els tres blocs no hi caben de costat. */
@media (max-width: 820px) {
    .eduscript-config-section--veu {
        grid-template-columns: 1fr;
    }
}

/* Les seccions van sobre --es-bg-hover, que és també el fons per defecte del
   carril dels selectors: tal qual, es confonien en una sola taca de color.
   Aquí el carril puja un to perquè hi hagi tres nivells ben diferenciats:
   secció (el més fosc) < carril < opció triada (blanca, amb anell). */
.eduscript-config-body .eduscript-segment {
    background: var(--es-bg-input);
}

/* ── El teu compte (crèdits) ───────────────────────────────────────────
   Informació de l'usuari, no de la plantilla: es distingeix visualment de
   la resta de seccions perquè ningú no pensi que es desa amb ella. */
.eduscript-config-section--compte {
    background: transparent;
    border-style: dashed;
}

.eduscript-config-compte__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.eduscript-config-compte__tram {
    font-size: 13px;
    font-weight: 600;
    color: var(--es-text-secondary);
}

.eduscript-config-compte__saldo {
    font-size: 13.5px;
    color: var(--es-text-secondary);
}

.eduscript-config-compte__saldo strong {
    font-size: 16px;
    color: var(--es-primary-dark);
}

.eduscript-config-compte__saldo.is-baix strong {
    color: var(--es-error);
}

.eduscript-config-compte__bar {
    height: 6px;
    margin-top: 8px;
    background: var(--es-bg-hover);
    border: 1px solid var(--es-border);
    border-radius: 999px;
    overflow: hidden;
}

.eduscript-config-compte__bar span {
    display: block;
    height: 100%;
    background: var(--es-primary);
    border-radius: 999px;
    transition: width 0.3s ease;
}

.eduscript-config-compte__nota,
.eduscript-config-compte__illimitat {
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--es-text-muted);
}

.eduscript-field--avaluacio .eduscript-segment__option {
    flex: 0 0 auto;
}

.eduscript-field--avaluacio .eduscript-segment__btn {
    min-width: 46px;
    padding-left: 12px;
    padding-right: 12px;
}

.eduscript-label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--es-text);
    letter-spacing: 0.01em;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.eduscript-label__hint {
    font-size: 11.5px;
    font-weight: 400;
    color: var(--es-text-muted);
}

/* Input i Textarea */
.eduscript-input,
.eduscript-textarea,
.eduscript-select {
    width: 100%;
    padding: 13px 16px;
    font-family: var(--es-font);
    font-size: 14.5px;
    color: var(--es-text);
    background: var(--es-bg-input);
    border: 1.5px solid var(--es-border);
    border-radius: var(--es-radius-md);
    transition: var(--es-transition);
    outline: none;
}

.eduscript-input::placeholder,
.eduscript-textarea::placeholder {
    color: var(--es-text-placeholder);
}

.eduscript-input:hover,
.eduscript-textarea:hover,
.eduscript-select:hover {
    border-color: var(--es-border-hover);
    background: var(--es-bg-card);
}

.eduscript-input:focus,
.eduscript-textarea:focus,
.eduscript-select:focus {
    border-color: var(--es-border-focus);
    background: var(--es-bg-card);
    box-shadow: var(--es-shadow-focus);
}

.eduscript-textarea {
    resize: vertical;
    min-height: 130px;
    line-height: 1.7;
}

/* Select personalitzat */
.eduscript-select-wrap {
    position: relative;
}

.eduscript-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    cursor: pointer;
}

.eduscript-select-arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--es-text-muted);
    transition: var(--es-transition);
}

.eduscript-select:focus + .eduscript-select-arrow {
    color: var(--es-primary);
}

/* ═══════════════════════════════════════════════════════════════════════
   CONTROL SEGMENTAT (Tipus de comentari / Llengua)
   ═══════════════════════════════════════════════════════════════════════ */
.eduscript-segment {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--es-bg-hover);
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-md);
}

.eduscript-segment__option {
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.eduscript-segment__option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.eduscript-segment__option {
    display: flex;
}

.eduscript-segment__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    padding: 9px 8px;
    font-size: 13.5px;
    font-weight: 600;
    /* Les opcions no triades s'han de poder llegir igual de bé que la triada:
       el que distingeix la tria és el fons blanc i l'anell de color, no pas
       tenir el text apagat. */
    color: var(--es-text);
    border-radius: var(--es-radius-sm);
    transition: var(--es-transition);
    text-align: center;
    line-height: 1.2;
    user-select: none;
}

.eduscript-segment__btn small {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--es-text-secondary);
    width: 100%;
    /* El subtítol pot ser més ample que el botó (p. ex. «una frase per ítem»):
       s'ajusta en dues línies centrades en lloc de desbordar-se i tocar la
       vora. Un petit coixí horitzontal el manté separat de les vores. */
    text-align: center;
    text-wrap: balance;
    padding: 0 2px;
    box-sizing: border-box;
}

.eduscript-segment__btn svg {
    flex-shrink: 0;
}

.eduscript-segment__option:hover .eduscript-segment__btn {
    color: var(--es-text);
}

.eduscript-segment__option input:checked + .eduscript-segment__btn {
    background: var(--es-bg-card);
    color: var(--es-primary-dark);
    box-shadow: var(--es-shadow-sm), 0 0 0 1.5px var(--es-primary);
}

.eduscript-segment__option input:checked + .eduscript-segment__btn small {
    color: var(--es-primary);
}

.eduscript-segment__option input:focus-visible + .eduscript-segment__btn {
    box-shadow: var(--es-shadow-focus);
}

.eduscript-segment__option input:disabled + .eduscript-segment__btn {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════════
   PLANTILLES
   ═══════════════════════════════════════════════════════════════════════ */
.eduscript-templates__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.eduscript-templates__select-wrap {
    flex: 1 1 220px;
    min-width: 150px;
    max-width: 100%;
}

.eduscript-templates__bar .eduscript-btn {
    flex-shrink: 0;
}

/* Select de plantilles destacat */
.eduscript-select--templates {
    background: var(--es-primary-subtle);
    border-color: var(--es-primary);
    color: var(--es-primary-dark);
    font-weight: 600;
}

.eduscript-select--templates:hover {
    background: var(--es-primary-light);
    border-color: var(--es-primary);
}

.eduscript-select--templates:focus {
    background: var(--es-primary-light);
}

/* Accions de plantilla (botons en línia amb icona + text). Són sis i han de
   cabre en una sola línia al costat del selector: per això van més justos de
   coixí i de lletra que un botó normal. El flex-wrap de la barra continua
   sent-hi de xarxa per a pantalles estretes. */
.eduscript-template-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Van amb el prefix de la barra a posta: .eduscript-btn defineix el coixí i
   la lletra més avall en aquest mateix fitxer i, a igualtat d'especificitat,
   guanyaria per ordre. */
.eduscript-templates__bar .eduscript-template-action {
    gap: 5px;
    padding: 10px 12px;
    font-size: 13px;
}

/* Icones una mica més petites: sis botons en una línia, cada píxel compta. */
.eduscript-templates__bar .eduscript-template-action svg {
    width: 14px;
    height: 14px;
}

.eduscript-template-action--danger {
    color: var(--es-error);
}

.eduscript-template-action--danger:hover {
    background: var(--es-error-bg);
    border-color: var(--es-error);
    color: var(--es-error);
}

/* Estat buit de la plantilla: botons grans de punt de partida */
.eduscript-template-empty {
    margin: 4px 0 14px;
}

.eduscript-template-empty__title {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--es-text);
}

.eduscript-template-empty__choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
}

.eduscript-start-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 14px 16px;
    text-align: left;
    background: var(--es-bg-card);
    border: 1.5px solid var(--es-border);
    border-radius: var(--es-radius-md);
    cursor: pointer;
    transition: var(--es-transition);
}

.eduscript-start-btn:hover {
    border-color: var(--es-primary);
    background: var(--es-primary-subtle);
    transform: translateY(-1px);
}

.eduscript-start-btn__emoji {
    font-size: 22px;
    line-height: 1;
    margin-bottom: 4px;
}

.eduscript-start-btn__label {
    font-size: 15px;
    font-weight: 600;
    color: var(--es-text);
}

.eduscript-start-btn__hint {
    font-size: 12.5px;
    color: var(--es-text-muted);
}

.eduscript-template-empty__note {
    margin: 10px 0 0;
    font-size: 12.5px;
    color: var(--es-text-muted);
}

/* Safata de plantilles compartides per altres mestres */
.eduscript-shared-inbox {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 4px 0 14px;
}

.eduscript-shared-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border-radius: var(--es-radius-md);
    background: var(--es-primary-subtle);
    border: 1.5px solid var(--es-primary-light);
}

.eduscript-shared-item__info {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.eduscript-shared-item__icon {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

.eduscript-shared-item__text {
    font-size: 13.5px;
    color: var(--es-text);
}

.eduscript-shared-item__text strong {
    color: var(--es-primary-dark);
}

.eduscript-shared-item__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   ÀREES A AVALUAR
   ═══════════════════════════════════════════════════════════════════════ */
.eduscript-areas-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.eduscript-areas-header .eduscript-label {
    margin-bottom: 0;
}

.eduscript-areas-header #eduscript-reset-areas {
    flex-shrink: 0;
}

.eduscript-areas-toggle-all {
    flex-shrink: 0;
    padding: 6px 12px;
    border: 1px solid var(--es-border);
    background: transparent;
    color: var(--es-primary-dark);
    font-family: var(--es-font);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--es-radius-sm);
    transition: var(--es-transition);
}

.eduscript-areas-toggle-all:hover {
    background: var(--es-primary-light);
}

.eduscript-areas {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 2px;
}

/* Missatge quan no hi ha cap àrea (cap plantilla carregada) */
.eduscript-areas-empty {
    margin: 4px 0 0;
    padding: 18px 20px;
    border: 1.5px dashed var(--es-border);
    border-radius: var(--es-radius-md);
    background: var(--es-bg-input);
    color: var(--es-text-muted);
    font-size: 14px;
    text-align: center;
}

.eduscript-area {
    border: 1.5px solid var(--es-border);
    border-radius: var(--es-radius-md);
    background: var(--es-bg-input);
    transition: var(--es-transition);
    overflow: hidden;
}

.eduscript-area:hover {
    border-color: var(--es-border-hover);
    background: var(--es-bg-card);
}

/* L'àrea inclosa a l'informe (checkbox marcat) es ressalta */
.eduscript-area--checked {
    border-color: rgba(217, 119, 87, 0.5);
    background: var(--es-bg-card);
    box-shadow: var(--es-shadow-sm);
}

.eduscript-area__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px 0 12px;
}

/* Botó per plegar/desplegar el cos de l'àrea (nom + fletxa) */
.eduscript-area__toggle,
.eduscript-area__toggle:hover,
.eduscript-area__toggle:focus,
.eduscript-area__toggle:active {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex: 1;
    min-width: 0;
    padding: 11px 6px 11px 0;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    cursor: pointer;
    text-align: left;
    font-family: var(--es-font);
    color: inherit;
}

.eduscript-area__chevron {
    flex-shrink: 0;
    color: var(--es-text-muted);
    transition: transform 0.2s ease;
}

.eduscript-area--open .eduscript-area__chevron {
    transform: rotate(180deg);
}

/* Botó d'edició del nom de l'àrea */
.eduscript-area__edit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--es-text-placeholder);
    cursor: pointer;
    border-radius: 6px;
    flex-shrink: 0;
    transition: var(--es-transition);
}

.eduscript-area:hover .eduscript-area__edit {
    color: var(--es-text-muted);
}

.eduscript-area__edit:hover {
    color: var(--es-primary) !important;
    background: var(--es-primary-light);
}

/* Botó de duplicació de l'àrea */
.eduscript-area__duplicate {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--es-text-placeholder);
    cursor: pointer;
    border-radius: 6px;
    flex-shrink: 0;
    transition: var(--es-transition);
}

.eduscript-area:hover .eduscript-area__duplicate {
    color: var(--es-text-muted);
}

.eduscript-area__duplicate:hover {
    color: var(--es-primary) !important;
    background: var(--es-primary-light);
}

/* Botó d'eliminar l'àrea */
.eduscript-area__delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    margin-right: 10px;
    border: none;
    background: transparent;
    color: var(--es-text-placeholder);
    cursor: pointer;
    border-radius: 6px;
    flex-shrink: 0;
    transition: var(--es-transition);
}

.eduscript-area:hover .eduscript-area__delete {
    color: var(--es-text-muted);
}

.eduscript-area__delete:hover {
    color: var(--es-error) !important;
    background: var(--es-error-bg);
}

/* Camp d'edició del nom de l'àrea */
.eduscript-area__rename {
    flex: 1;
    min-width: 0;
    margin: 7px 10px 7px 4px;
    padding: 5px 10px;
    font-family: var(--es-font);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--es-text);
    background: var(--es-bg-card);
    border: 1.5px solid var(--es-primary);
    border-radius: var(--es-radius-sm);
    outline: none;
    box-shadow: var(--es-shadow-focus);
}

/* Handle d'arrossegament */
.eduscript-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 24px;
    color: var(--es-text-placeholder);
    cursor: grab;
    flex-shrink: 0;
    border-radius: 4px;
    transition: var(--es-transition);
}

.eduscript-drag-handle:hover {
    color: var(--es-text-muted);
    background: var(--es-bg-hover);
}

.eduscript-drag-handle:active {
    cursor: grabbing;
}

.eduscript-dragging {
    opacity: 0.45;
}

/* (Abans l'àrea "Aspectes personals" anava a doble columna; ara totes les
   àrees van en una sola columna i els seus ítems s'apilen igual.) */

.eduscript-area__checkbox {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    accent-color: var(--es-primary);
    cursor: pointer;
    -webkit-appearance: checkbox !important;
    appearance: auto !important;
}

.eduscript-area__name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--es-text-secondary);
    transition: var(--es-transition);
}

.eduscript-area--open .eduscript-area__name {
    color: var(--es-primary-dark);
}

.eduscript-area__body {
    display: none;
    animation: eduscript-fadeIn 0.25s ease;
}

.eduscript-area--open .eduscript-area__body {
    display: block;
}

/* Ítems amb estrelles */
.eduscript-area__items {
    border-top: 1px solid var(--es-border);
    padding: 6px 14px 8px;
    background: var(--es-bg-card);
}

.eduscript-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 0;
}

.eduscript-item + .eduscript-item {
    border-top: 1px dashed var(--es-bg-hover);
}

.eduscript-item__name {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--es-text-secondary);
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}

/* Camp d'edició del nom de l'ítem */
.eduscript-item__rename {
    flex: 1;
    min-width: 0;
    margin: 0 6px 0 2px;
    padding: 4px 8px;
    font-family: var(--es-font);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--es-text);
    background: var(--es-bg-card);
    border: 1.5px solid var(--es-primary);
    border-radius: var(--es-radius-sm);
    outline: none;
    box-shadow: var(--es-shadow-focus);
}

.eduscript-stars {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.eduscript-star {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--es-border-hover);
    cursor: pointer;
    border-radius: 6px;
    transition: var(--es-transition);
}

.eduscript-star:hover {
    color: var(--es-accent-warm);
    transform: scale(1.15);
    background: var(--es-bg-hover);
}

.eduscript-star--on {
    color: var(--es-accent-warm);
}

.eduscript-star:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Controls de cada ítem (editar / eliminar) */
.eduscript-item__right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.eduscript-item__edit,
.eduscript-item__remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--es-text-placeholder);
    cursor: pointer;
    border-radius: 6px;
    transition: var(--es-transition);
}

/* Els botons només es ressalten en passar-hi per sobre l'ítem */
.eduscript-item:hover .eduscript-item__edit,
.eduscript-item:hover .eduscript-item__remove {
    color: var(--es-text-muted);
}

.eduscript-item__edit:hover {
    color: var(--es-primary) !important;
    background: var(--es-primary-light);
}

.eduscript-item__remove:hover {
    color: var(--es-error) !important;
    background: var(--es-error-bg);
}

/* Fila per afegir un ítem propi */
.eduscript-item-add {
    display: flex;
    align-items: center;
    gap: 6px;
    /* Una mica d'aire a la dreta: si no, el botó del catàleg queda enganxat
       a la vora de l'àrea. El camp de text ja s'encongeix sol per deixar-l'hi. */
    padding: 7px 8px 4px 0;
    border-top: 1px dashed var(--es-bg-hover);
    margin-top: 2px;
}

.eduscript-item-add__input {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    font-family: var(--es-font);
    font-size: 12.5px;
    color: var(--es-text);
    background: var(--es-bg-input);
    border: 1.5px dashed var(--es-border);
    border-radius: var(--es-radius-sm);
    outline: none;
    transition: var(--es-transition);
}

.eduscript-item-add__input::placeholder {
    color: var(--es-text-placeholder);
}

.eduscript-item-add__input:focus {
    border-color: var(--es-primary);
    border-style: solid;
    background: var(--es-bg-card);
}

.eduscript-item-add__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    flex-shrink: 0;
    background: var(--es-primary-light);
    color: var(--es-primary-dark);
    cursor: pointer;
    border-radius: var(--es-radius-sm);
    transition: var(--es-transition);
}

.eduscript-item-add__btn:hover {
    background: var(--es-primary);
    color: #fff;
}

.eduscript-item-add__btn:disabled,
.eduscript-item-add__input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Fila per afegir una àrea nova */
.eduscript-area-add {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.eduscript-area-add__input {
    flex: 1;
    min-width: 0;
    padding: 9px 14px;
    font-family: var(--es-font);
    font-size: 13px;
    color: var(--es-text);
    background: var(--es-bg-input);
    border: 1.5px dashed var(--es-border);
    border-radius: var(--es-radius-sm);
    outline: none;
    transition: var(--es-transition);
}

.eduscript-area-add__input::placeholder {
    color: var(--es-text-placeholder);
}

.eduscript-area-add__input:focus {
    border-color: var(--es-primary);
    border-style: solid;
    background: var(--es-bg-card);
}

.eduscript-area-add__btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border: none;
    flex-shrink: 0;
    background: var(--es-primary-light);
    color: var(--es-primary-dark);
    font-family: var(--es-font);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--es-radius-sm);
    transition: var(--es-transition);
}

.eduscript-area-add__btn:hover {
    background: var(--es-primary);
    color: #fff;
}

.eduscript-area-add__btn:disabled,
.eduscript-area-add__input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.eduscript-area__text,
.eduscript-area__continguts {
    border: none !important;
    border-top: 1px solid var(--es-border) !important;
    border-radius: 0 !important;
    background: var(--es-bg-card) !important;
    box-shadow: none !important;
    min-height: 56px;
    font-size: 13px;
}

/* Observacions individuals: fons amable per convidar a escriure-hi
   (to càlid de la paleta, com el ressaltat de les àrees) */
.eduscript-area__text {
    background: var(--es-primary-subtle) !important;
}

.eduscript-area__text:hover {
    background: var(--es-primary-light) !important;
}

.eduscript-area__text:focus {
    background: var(--es-primary-light) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   INTERRUPTOR (Toggle)
   ═══════════════════════════════════════════════════════════════════════ */
.eduscript-toggle {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    padding: 14px 16px;
    background: var(--es-bg-input);
    border: 1.5px solid var(--es-border);
    border-radius: var(--es-radius-md);
    transition: var(--es-transition);
}

.eduscript-toggle:hover {
    border-color: var(--es-border-hover);
    background: var(--es-bg-card);
}

.eduscript-toggle__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.eduscript-toggle__track {
    position: relative;
    flex-shrink: 0;
    width: 40px;
    height: 22px;
    margin-top: 1px;
    background: var(--es-border-hover);
    border-radius: var(--es-radius-pill);
    transition: var(--es-transition);
}

.eduscript-toggle__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: var(--es-shadow-sm);
    transition: var(--es-transition);
}

.eduscript-toggle__input:checked ~ .eduscript-toggle__track {
    background: var(--es-primary);
}

.eduscript-toggle__input:checked ~ .eduscript-toggle__track .eduscript-toggle__thumb {
    transform: translateX(18px);
}

.eduscript-toggle__input:focus-visible ~ .eduscript-toggle__track {
    box-shadow: var(--es-shadow-focus);
}

.eduscript-toggle__text {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--es-text);
    line-height: 1.4;
}

.eduscript-toggle__text small {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--es-text-muted);
    margin-top: 2px;
}

/* Opcions de les recomanacions (veu i gènere), visibles amb el toggle */
.eduscript-reco-opts {
    display: none;
    gap: 22px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding: 16px 18px;
    background: var(--es-bg-input);
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-md);
    animation: eduscript-fadeIn 0.25s ease;
}

.eduscript-reco-opts--visible {
    display: flex;
}

.eduscript-reco-opts__group {
    flex: 1 1 240px;
}

/* Grup que ocupa tota l'amplada (p. ex. les indicacions per a la IA) */
.eduscript-reco-opts__group--full {
    flex-basis: 100%;
}

.eduscript-reco-opts__group .eduscript-label {
    margin-bottom: 8px;
}

/* Camp de text amb fons amable (indicacions per a la IA) */
.eduscript-textarea--soft {
    background: var(--es-primary-subtle);
    min-height: 80px;
}

.eduscript-config-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Dins de la configuració, els camps no necessiten marge propi extra */
.eduscript-config-body .eduscript-field {
    margin: 0;
}

/* Opcions de format: els dos toggles principals, en dues columnes */
.eduscript-format-toggles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
}

/* Graella de selectors d'assoliment: sempre 2×2 (quatre tries de dues opcions),
   perquè amb auto-fit quedarien 3+1 en pantalles amples. En pantalles estretes,
   una sola columna. */
.eduscript-assoliment-opts__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
    align-items: stretch;
}

@media (max-width: 560px) {
    .eduscript-assoliment-opts__row {
        grid-template-columns: 1fr;
    }
}

/* Els selectors segmentats han de tenir la mateixa estructura vertical
   (etiqueta a sobre + botons a sota), amb els botons alineats entre columnes. */
.eduscript-assoliment-opts__row--segments .eduscript-assoliment-opts__group {
    display: flex;
    flex-direction: column;
}

.eduscript-assoliment-opts__row--segments .eduscript-segment {
    margin-top: auto;
}

/* Toggles i opcions més compactes dins de la configuració, per no ocupar tant */
.eduscript-config-body .eduscript-toggle {
    padding: 10px 12px;
}

.eduscript-config-body .eduscript-reco-opts {
    margin-top: 10px;
    padding: 12px 14px;
    gap: 14px;
}

/* Títol de subnivell (p. ex. les opcions que pengen d'un toggle) */
.eduscript-suboption__title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--es-primary);
    margin-bottom: 10px;
}

/* ─── Opcions de format de l'informe (negreta d'àrees i assoliment) ─── */
/* Separació entre toggles consecutius dins d'un mateix camp */
.eduscript-field > .eduscript-toggle + .eduscript-toggle {
    margin-top: 10px;
}

/* Sub-opcions que pengen del toggle «Mostra l'assoliment»: niuades visualment
   amb indentació i una vora d'accent a l'esquerra perquè quedi clar que en depenen. */
.eduscript-assoliment-opts {
    display: none;
    margin: 0;
    padding: 12px 14px;
    background: var(--es-bg-card);
    border: 1px solid var(--es-primary-light);
    border-left: 3px solid var(--es-primary);
    border-radius: 0 var(--es-radius-md) var(--es-radius-md) 0;
    animation: eduscript-fadeIn 0.25s ease;
}

.eduscript-assoliment-opts--visible {
    display: block;
}

/* Vista prèvia de l'informe: SEMPRE visible dins de les opcions (dues àrees
   d'exemple que reflecteixen negreta, assoliment, salts i separació). */
.eduscript-report-preview {
    margin-top: 2px;
}

.eduscript-assoliment-preview__label {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--es-text-muted);
}

.eduscript-assoliment-preview__box {
    padding: 12px 14px;
    background: var(--es-bg-card);
    border: 1px dashed var(--es-primary-light);
    border-radius: var(--es-radius-md);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--es-text);
}

/* Dins de la vista prèvia hi ha més d'un bloc: marge entre blocs una mica més
   compacte que al butlletí, i el separador buit continua sense marge. */
.eduscript-assoliment-preview__box .eduscript-report-block {
    margin: 0 0 1.2em;
}

.eduscript-assoliment-preview__box .eduscript-report-block:last-child,
.eduscript-assoliment-preview__box .eduscript-report-block--sep {
    margin: 0;
}

.eduscript-assoliment-hint {
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--es-text-muted);
    line-height: 1.45;
}

/* Grup d'opcions dins del panell d'assoliment (posició, cursiva) */
.eduscript-assoliment-opts__group .eduscript-label {
    display: block;
    margin-bottom: 8px;
}

/* Bloc d'assoliment dins de cada àrea (just després dels ítems): panell
   subtil, amagat si la funció no està activa */
.eduscript-assoliment-block {
    display: none;
    margin: 10px 0 4px;
    padding: 9px 12px;
    background: var(--es-primary-subtle);
    border: 1px solid var(--es-primary-light);
    border-radius: var(--es-radius-md);
}

.eduscript-app--assoliment .eduscript-assoliment-block {
    display: block;
}

/* Fila compacta en una sola línia: etiqueta + enllaç «Edita els textos» a
   l'esquerra i els botons AE/AN/AS/NA a la dreta. */
.eduscript-assoliment-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.eduscript-assoliment-row__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--es-text);
}

/* Els botons de nota es queden alineats a la dreta de la fila. */
.eduscript-assoliment-row .eduscript-assoliment-grades {
    margin-left: auto;
}

/* Enllaç-botó «Edita els textos» integrat a la mateixa línia. */
.eduscript-assoliment-edit__toggle {
    padding: 0;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--es-primary);
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.eduscript-assoliment-edit__toggle::before {
    content: '✎ ';
}

.eduscript-assoliment-edit__toggle:hover {
    text-decoration: underline;
}

.eduscript-assoliment-edit__toggle--open::before {
    content: '▾ ';
}

.eduscript-assoliment-grades {
    display: inline-flex;
    gap: 6px;
}

.eduscript-grade {
    min-width: 38px;
    padding: 6px 10px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--es-text-muted);
    background: var(--es-bg-card);
    border: 1.5px solid var(--es-border);
    border-radius: var(--es-radius-md);
    cursor: pointer;
    transition: var(--es-transition);
}

.eduscript-grade:hover {
    border-color: var(--es-primary);
    color: var(--es-primary);
}

.eduscript-grade--on {
    color: #fff;
    background: var(--es-primary);
    border-color: var(--es-primary);
}

.eduscript-assoliment-texts {
    display: grid;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--es-primary-light);
}

.eduscript-assoliment-texts[hidden] {
    display: none;
}

.eduscript-assoliment-text-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.eduscript-assoliment-text-row__lvl {
    flex: 0 0 40px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--es-text-muted);
    cursor: help;
}

.eduscript-area__assoliment-text {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--es-text);
    background: var(--es-bg-input);
    border: 1.5px solid var(--es-border);
    border-radius: var(--es-radius-md);
    transition: var(--es-transition);
}

.eduscript-area__assoliment-text:focus {
    outline: none;
    border-color: var(--es-border-focus);
    box-shadow: var(--es-shadow-focus);
    background: var(--es-bg-card);
}

/* Informe amb format ric: blocs per àrea (negreta del nom, cursiva de l'assoliment).
   El marge entre blocs és en em i s'acosta a una línia de text: així l'espai
   ENTRE àrees no queda mai més petit que una línia en blanc interna del bloc
   (p. ex. la del salt de l'assoliment), que és el que feia l'antic 14px. */
.eduscript-report-block {
    margin: 0 0 1.6em;
}

.eduscript-report-block:last-child {
    margin-bottom: 0;
}

/* Paràgraf buit de separació entre àrees (opció «Línia en blanc entre àrees»):
   la línia buida ja fa de separador, per tant sense marges propis. */
.eduscript-report-block--sep {
    margin: 0;
}

.eduscript-output strong,
.eduscript-history-item__text strong {
    font-weight: 700;
    color: var(--es-text);
}

.eduscript-output em,
.eduscript-history-item__text em {
    font-style: italic;
}

/* Camp de text del títol de les recomanacions */
.eduscript-reco-titol-text {
    margin-top: 10px;
}

/* Indicacions per a la IA (per alumne): fora del plegable, només visibles
   quan s'activen les recomanacions */
.eduscript-reco-indic {
    display: none;
}

.eduscript-reco-indic--visible {
    display: block;
}

.eduscript-textarea--soft:hover,
.eduscript-textarea--soft:focus {
    background: var(--es-primary-light);
}

/* Indicador de crèdits restants */
.eduscript-credits {
    text-align: center;
    font-size: 13px;
    color: var(--es-text-muted);
    margin: 4px 0 -4px;
}

.eduscript-credits:empty {
    display: none;
}

.eduscript-credits--empty {
    color: var(--es-error);
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════
   BOTONS
   ═══════════════════════════════════════════════════════════════════════ */
.eduscript-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-family: var(--es-font);
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: var(--es-radius-pill);
    cursor: pointer;
    transition: var(--es-transition);
    outline: none;
    white-space: nowrap;
    text-decoration: none;
    line-height: 1;
}

.eduscript-btn:focus-visible {
    box-shadow: var(--es-shadow-focus);
}

/* Botó principal */
.eduscript-btn--primary {
    width: 100%;
    padding: 17px 28px;
    font-size: 15.5px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(120deg, var(--es-primary), var(--es-accent));
    box-shadow: var(--es-shadow-primary);
    border-radius: var(--es-radius-pill);
    position: relative;
    overflow: hidden;
}

.eduscript-btn--primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, var(--es-primary-dark), #A14D33);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.eduscript-btn--primary:hover::before {
    opacity: 1;
}

.eduscript-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(217, 119, 87, 0.42);
}

.eduscript-btn--primary:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(217, 119, 87, 0.3);
}

.eduscript-btn--primary .eduscript-btn__icon,
.eduscript-btn--primary .eduscript-btn__text {
    position: relative;
    z-index: 1;
}

/* Botó secundari */
.eduscript-btn--secondary {
    color: #fff;
    background: var(--es-primary);
    box-shadow: var(--es-shadow-sm);
}

.eduscript-btn--secondary:hover {
    background: var(--es-primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--es-shadow-md);
}

/* Botó outline */
.eduscript-btn--outline {
    color: var(--es-primary-dark);
    background: transparent;
    border: 1.5px solid var(--es-border);
}

.eduscript-btn--outline:hover {
    background: var(--es-primary-light);
    border-color: var(--es-primary);
    color: var(--es-primary-dark);
}

/* Botó ghost */
.eduscript-btn--ghost {
    color: var(--es-text-secondary);
    background: transparent;
}

.eduscript-btn--ghost:hover {
    background: var(--es-bg-hover);
    color: var(--es-text);
}

/* Botó petit */
.eduscript-btn--sm {
    padding: 6px 13px;
    font-size: 12px;
    gap: 5px;
}

/* ═══════════════════════════════════════════════════════════════════════
   ESTAT DE CÀRREGA (Loading)
   ═══════════════════════════════════════════════════════════════════════ */
.eduscript-btn--loading .eduscript-btn__icon,
.eduscript-btn--loading .eduscript-btn__text {
    display: none;
}

.eduscript-btn--loading .eduscript-btn__loader {
    display: flex !important;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.eduscript-btn__loader {
    display: none;
}

.eduscript-spinner {
    width: 20px;
    height: 20px;
    border: 2.5px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: eduscript-spin 0.7s linear infinite;
}

@keyframes eduscript-spin {
    to {
        transform: rotate(360deg);
    }
}

.eduscript-btn--loading {
    pointer-events: none;
    animation: eduscript-pulse 1.8s ease-in-out infinite;
}

@keyframes eduscript-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

/* ═══════════════════════════════════════════════════════════════════════
   RESULTAT
   ═══════════════════════════════════════════════════════════════════════ */
.eduscript-result-section {
    animation: eduscript-slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1.5px solid rgba(217, 119, 87, 0.25);
}

@keyframes eduscript-slideUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.eduscript-output {
    min-height: 100px;
    padding: 24px 26px;
    background: var(--es-primary-subtle);
    border: 1.5px solid var(--es-primary-light);
    border-radius: var(--es-radius-lg);
    font-size: 15px;
    line-height: 1.85;
    color: var(--es-text);
    margin-bottom: 20px;
    transition: var(--es-transition);
    outline: none;
    cursor: text;
    white-space: pre-wrap;
}

.eduscript-output:focus {
    border-color: var(--es-border-focus);
    box-shadow: var(--es-shadow-focus);
    background: var(--es-bg-card);
}

.eduscript-output:empty::before {
    content: 'L\'informe apareixerà aquí...';
    color: var(--es-text-placeholder);
}

/* Cursor parpellejant durant l'escriptura progressiva */
.eduscript-output--typing::after {
    content: '▋';
    color: var(--es-primary);
    animation: eduscript-blink 0.8s steps(1) infinite;
    margin-left: 1px;
}

@keyframes eduscript-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Badge de comptador de paraules */
.eduscript-badge {
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: var(--es-radius-pill);
    background: var(--es-primary-light);
    color: var(--es-primary-dark);
    white-space: nowrap;
}

/* Botons d'acció del resultat */
.eduscript-result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════
   HISTORIAL
   ═══════════════════════════════════════════════════════════════════════ */
.eduscript-history-section {
    animation: eduscript-slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.eduscript-history-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 420px;
    overflow-y: auto;
    padding-right: 4px;
}

/* Scrollbar personalitzat */
.eduscript-history-list::-webkit-scrollbar {
    width: 5px;
}

.eduscript-history-list::-webkit-scrollbar-track {
    background: transparent;
}

.eduscript-history-list::-webkit-scrollbar-thumb {
    background: var(--es-border);
    border-radius: 10px;
}

.eduscript-history-list::-webkit-scrollbar-thumb:hover {
    background: var(--es-text-muted);
}

/* Element de l'historial */
.eduscript-history-item {
    padding: 8px 12px;
    background: var(--es-bg);
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-md);
    transition: var(--es-transition);
    position: relative;
}

.eduscript-history-item:hover {
    background: var(--es-bg-card);
    border-color: rgba(217, 119, 87, 0.4);
    box-shadow: var(--es-shadow-sm);
}

/* Fila compacta: nom + info a l'esquerra, botons a la dreta */
.eduscript-history-item__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

/* El nom és el disparador per desplegar el text */
.eduscript-history-item__toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 220px;
    min-width: 0;
    padding: 4px 2px;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--es-font);
}

/* Neutralitzar qualsevol estil de <button> del tema de WordPress
   (alguns temes hi posen un fons fosc en passar-hi per sobre). */
.eduscript-history-item__toggle,
.eduscript-history-item__toggle:hover,
.eduscript-history-item__toggle:focus,
.eduscript-history-item__toggle:active {
    background: transparent;
    box-shadow: none;
    outline: none;
    color: inherit;
}

/* Pista visual de clic: el nom es ressalta en passar-hi per sobre */
.eduscript-history-item__toggle:hover .eduscript-history-item__name {
    color: var(--es-primary-dark);
}

.eduscript-history-item__toggle:hover .eduscript-history-item__chevron {
    color: var(--es-primary);
}

.eduscript-history-item__chevron {
    flex-shrink: 0;
    color: var(--es-text-muted);
    transition: transform 0.2s ease;
}

.eduscript-history-item--open .eduscript-history-item__chevron {
    transform: rotate(180deg);
}

.eduscript-history-item__name {
    font-size: 14px;
    font-weight: 700;
    color: var(--es-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eduscript-history-item__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.eduscript-history-item__tag {
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: var(--es-radius-pill);
    background: var(--es-primary-light);
    color: var(--es-primary-dark);
    white-space: nowrap;
}

.eduscript-history-item__date {
    font-size: 11px;
    color: var(--es-text-muted);
    font-weight: 400;
}

/* Text de l'informe: ocult fins que es desplega */
.eduscript-history-item__text {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--es-border);
    font-size: 13px;
    color: var(--es-text-secondary);
    line-height: 1.6;
    white-space: pre-wrap;
}

.eduscript-history-item__text[hidden] {
    display: none;
}

/* El text desplegat és editable: se li dona aspecte de camp en enfocar-lo */
.eduscript-history-item__text[contenteditable="true"] {
    border-radius: var(--es-radius-sm);
    padding: 8px 10px 8px 10px;
    margin-left: -10px;
    margin-right: -10px;
    outline: 1px solid transparent;
    transition: background 0.15s ease, outline-color 0.15s ease;
    cursor: text;
}

.eduscript-history-item__text[contenteditable="true"]:hover {
    background: var(--es-bg-input);
}

.eduscript-history-item__text[contenteditable="true"]:focus {
    background: var(--es-bg-card);
    outline-color: var(--es-border-focus);
}

/* Peu d'edició de cada informe de l'historial: pista + botó de desar */
.eduscript-history-item__edit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.eduscript-history-item__edit[hidden] {
    display: none;
}

.eduscript-history-item__estat {
    font-size: 11px;
    color: var(--es-text-muted);
    min-height: 1em;
}

.eduscript-history-item__desa:disabled {
    opacity: 0.5;
    cursor: default;
}

.eduscript-history-item__estat--ok {
    color: var(--es-success);
}

.eduscript-history-item__estat--error {
    color: var(--es-error);
}

.eduscript-history-item__actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   TOAST DE NOTIFICACIONS
   ═══════════════════════════════════════════════════════════════════════ */
.eduscript-toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    padding: 14px 28px;
    background: var(--es-text);
    color: #fff;
    font-family: var(--es-font);
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--es-radius-pill);
    box-shadow: var(--es-shadow-lg);
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    max-width: 90vw;
    text-align: center;
}

.eduscript-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.eduscript-toast--success {
    background: var(--es-success);
}

.eduscript-toast--error {
    background: var(--es-error);
}

/* ═══════════════════════════════════════════════════════════════════════
   PEU DE PÀGINA
   ═══════════════════════════════════════════════════════════════════════ */
.eduscript-footer {
    text-align: center;
    padding: 14px 20px;
    margin-top: 12px;
    background: var(--es-bg-card);
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-pill);
    box-shadow: var(--es-shadow-sm);
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.eduscript-footer p {
    font-size: 12px;
    color: var(--es-text-muted);
    font-weight: 400;
}

.eduscript-footer strong {
    font-weight: 600;
    color: var(--es-text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════
   EINA COOPERATIVA — MENÚ DE LA CLASSE
   Quatre seccions (Banc de frases · Alumnat · Avaluació · Informe). Les que
   no toquen (frases si l'escola no en fa servir, informe si no ets tutor/a)
   les amaga el JS.
   ═══════════════════════════════════════════════════════════════════════ */
.eduscript-coop-nav {
    margin-bottom: 20px;
    border-radius: var(--es-radius-lg);
    box-shadow: var(--es-shadow-md);
    overflow: hidden;
}

/* ─── Barra de l'avaluació en curs ─── */
.eduscript-coop-avbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(120deg, var(--es-primary), var(--es-accent));
}

.eduscript-coop-avbar__titol {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
}

/* El trimestre ha de quedar al centre de la BARRA, no del que sobra: amb el
   nom del mestre a l'esquerra (llarg) i la classe a la dreta (curta), un
   simple flex el deixava desplaçat cap a la dreta. A partir de tauleta se
   centra de debò; a mòbil es deixa el flex de sempre, que hi ha poc espai. */
@media (min-width: 700px) {
    .eduscript-coop-avbar {
        position: relative;
    }

    .eduscript-coop-avbar__titol {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        flex: 0 0 auto;
        max-width: 44%;
    }

    .eduscript-coop-avbar__user {
        margin-right: auto;
    }

    .eduscript-coop-avbar__classe {
        margin-left: auto;
    }
}

/* L'avaluació va en una pastilla, com el nom i la classe: així l'emoji de
   l'estació queda damunt de blanc i no s'ha de triar pel contrast amb el
   taronja de la barra. */
.eduscript-coop-avbar__pastilla {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 7px 18px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--es-primary-dark);
    background: #fff;
    border-radius: var(--es-radius-pill);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eduscript-coop-avbar__emoji {
    font-size: 17px;
    line-height: 1;
    text-transform: none;
    letter-spacing: 0;
}

.eduscript-coop-avbar__user,
.eduscript-coop-avbar__classe {
    flex: 0 0 auto;
    max-width: 40%;
    padding: 7px 15px;
    font-family: var(--es-font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--es-primary-dark);
    background: #fff;
    border: none;
    border-radius: var(--es-radius-pill);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eduscript-coop-avbar__classe {
    /* El nom de la classe es deixa tal com l'ha escrit l'escola («1rA», «6è A»):
       en majúscules quedaria «1RA», que no és com se'n diu. */
    text-transform: none;
    font-size: 14px;
    cursor: pointer;
    transition: var(--es-transition);
}

.eduscript-coop-avbar__classe:hover {
    transform: translateY(-1px);
    box-shadow: var(--es-shadow-sm);
}

/* ─── Menú fosc, amb el subratllat que creix ─── */
.eduscript-coop-menu {
    display: flex;
    flex-wrap: wrap;
    background: #2F2A20;
}

.eduscript-app[data-theme="dark"] .eduscript-coop-menu {
    background: #191510;
}

.eduscript-coop-menu__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    flex: 1 1 auto;
    padding: 14px 14px;
    font-family: var(--es-font);
    font-size: 16.5px;
    font-weight: 600;
    color: #E8E2D4;
    background: none;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.eduscript-coop-menu__item:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.07);
}

/* El subratllat creix de banda a banda de la paraula en passar-hi per sobre */
.eduscript-coop-menu__txt {
    padding-bottom: 3px;
    background-image: linear-gradient(var(--es-primary), var(--es-primary));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 2px;
    transition: background-size 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.eduscript-coop-menu__item:hover .eduscript-coop-menu__txt,
.eduscript-coop-menu__item:focus-visible .eduscript-coop-menu__txt {
    background-size: 100% 2px;
}

.eduscript-coop-menu__item--on {
    color: #fff;
    background: rgba(255, 255, 255, 0.10);
}

.eduscript-coop-menu__item--on .eduscript-coop-menu__txt {
    background-size: 100% 2px;
}

.eduscript-coop-menu__ico {
    flex: 0 0 auto;
    opacity: 0.85;
}

.eduscript-coop-menu__item--on .eduscript-coop-menu__ico {
    opacity: 1;
    color: var(--es-primary);
}

/* ─── Configuració: blocs ─── */
/* Els dos blocs de Configuració, l'un al costat de l'altre. Si el mestre no
   és tutor/a, el de la signatura no es pinta i el primer ocupa tot l'ample. */
.eduscript-coop-config-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 0 32px;
    align-items: start;
}

/* A dues columnes hi ha menys ample: l'estat de la signatura va a la seva
   línia en comptes d'espitjar el títol i partir-lo. */
.eduscript-coop-config-cols .eduscript-coop-config-block__title {
    flex-wrap: wrap;
}

.eduscript-coop-config-cols .eduscript-coop-estil__estat {
    flex: 1 0 100%;
}

.eduscript-coop-config-block {
    padding-top: 18px;
    margin-top: 18px;
    border-top: 1px solid var(--es-border);
}

.eduscript-coop-config-block__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--es-text);
}

.eduscript-coop-config-block__ico {
    font-size: 15px;
    line-height: 1;
}

/* ─── Banc de frases ─── */
/* Les àrees es pinten com a la valoració, però sense estrelles: només el nom
   de l'ítem, quantes frases té i les quatre caixes. */
.eduscript-coop-frases-item {
    flex-wrap: wrap;
    cursor: default;
}

.eduscript-coop-frases-item .eduscript-item__name {
    flex: 1 1 auto;
    cursor: pointer;
}

.eduscript-coop-frases-item .eduscript-item__right {
    margin-left: auto;
}

/* ─── Nansa per reordenar els ítems (arrossegant o amb les fletxes) ─── */
.eduscript-item__drag {
    flex: 0 0 auto;
    padding: 2px 3px;
    margin-right: 2px;
    font-size: 13px;
    line-height: 1;
    letter-spacing: -2px;
    color: transparent;
    background: none;
    border: none;
    border-radius: 5px;
    cursor: grab;
    /* Cal perquè al mòbil arrossegar l'ítem no faci moure la pàgina. */
    touch-action: none;
    transition: color 0.15s ease;
}

.eduscript-item:hover .eduscript-item__drag,
.eduscript-item__drag:focus-visible {
    color: var(--es-text-placeholder);
}

.eduscript-item__drag:hover {
    color: var(--es-primary);
    background: var(--es-primary-light);
}

.eduscript-item__drag:active {
    cursor: grabbing;
}

/* Sense ratolí (tauleta, mòbil) no hi ha «passar per sobre»: la nansa s'ha
   de veure sempre o ningú no sabrà que els ítems es poden moure. */
@media (hover: none) {
    .eduscript-item__drag {
        color: var(--es-text-placeholder);
        padding: 4px 6px;
    }
}

/* L'ítem que s'està arrossegant i el forat que va deixant */
.eduscript-item--dragging {
    opacity: 0.85;
    background: var(--es-primary-subtle);
    box-shadow: var(--es-shadow-md);
}

.eduscript-area__items--dragging {
    cursor: grabbing;
    user-select: none;
}

.eduscript-area__items--dragging .eduscript-item:not(.eduscript-item--dragging) {
    transition: transform 0.12s ease;
}

/* ─── Alumnat ─── */
/* Files primes: amb vint-i-cinc alumnes, cada mil·límetre de més obliga a
   desplaçar-se per veure la llista sencera. */
.eduscript-coop-alumnat-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding: 6px 12px;
    background: var(--es-bg-input);
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-sm);
    margin-bottom: 5px;
}

.eduscript-coop-alumnat-row__num {
    flex: 0 0 26px;
    font-size: 13px;
    font-weight: 700;
    color: var(--es-text-muted);
    text-align: right;
}

.eduscript-coop-alumnat-row__nom {
    flex: 1 1 160px;
    font-size: 15px;
    font-weight: 600;
    color: var(--es-text);
}

.eduscript-coop-alumnat-row__camp {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--es-text-secondary);
}

.eduscript-coop-alumnat-row__camp .eduscript-select-wrap {
    width: auto;
}

.eduscript-select--sm {
    width: auto;
    min-width: 92px;
    /* 34px a la dreta: la fletxa ocupa de 14 a 26px del marge dret i cal
       deixar-hi aire perquè no toqui l'última lletra. */
    padding: 4px 34px 4px 11px;
    font-size: 13.5px;
}

.eduscript-select--sm:disabled {
    opacity: 0.75;
    cursor: not-allowed;
}

@media (max-width: 600px) {
    .eduscript-coop-avbar__pastilla {
        font-size: 12px;
        padding: 6px 12px;
        gap: 6px;
    }

    .eduscript-coop-avbar__emoji {
        font-size: 14px;
    }

    .eduscript-coop-avbar__user,
    .eduscript-coop-avbar__classe {
        font-size: 11.5px;
        padding: 6px 11px;
    }

    .eduscript-coop-menu__item {
        flex: 1 1 33%;
        gap: 6px;
        padding: 11px 6px;
        font-size: 14px;
    }

    .eduscript-coop-menu__ico {
        width: 17px;
        height: 17px;
    }

    .eduscript-coop-alumnat-row__nom {
        flex: 1 1 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */

/* Tauleta */
@media (max-width: 768px) {
    .eduscript-app {
        padding: 20px 12px 44px;
    }

    .eduscript-card {
        padding: 24px;
    }

    .eduscript-field-row--config {
        flex-direction: column;
    }

    .eduscript-result-actions {
        flex-direction: column;
    }

    .eduscript-result-actions .eduscript-btn {
        width: 100%;
    }
}

/* Mòbil */
@media (max-width: 480px) {
    .eduscript-app {
        padding: 16px 10px 36px;
    }

    .eduscript-hero {
        margin-bottom: 26px;
    }

    .eduscript-hero__subtitle {
        font-size: 14px;
    }

    .eduscript-card {
        padding: 20px;
        border-radius: var(--es-radius-lg);
    }

    .eduscript-field-row {
        flex-direction: column;
        gap: 18px;
    }

    .eduscript-areas {
        grid-template-columns: 1fr;
    }

    .eduscript-output {
        padding: 18px 18px;
        font-size: 14px;
    }

    .eduscript-btn--primary {
        padding: 15px 20px;
        font-size: 14.5px;
    }

    .eduscript-history-item__actions {
        opacity: 1;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   ANIMACIONS ADDICIONALS
   ═══════════════════════════════════════════════════════════════════════ */

/* Animació de sacseig per a errors */
@keyframes eduscript-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

.eduscript-field--error .eduscript-input,
.eduscript-field--error .eduscript-textarea,
.eduscript-field--error .eduscript-select {
    border-color: var(--es-error);
    animation: eduscript-shake 0.4s ease;
}

/* Animació d'aparició gradual */
@keyframes eduscript-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Skeleton loading per a historial */
.eduscript-skeleton {
    background: linear-gradient(90deg, var(--es-bg) 25%, var(--es-bg-hover) 50%, var(--es-bg) 75%);
    background-size: 200% 100%;
    animation: eduscript-skeleton-shine 1.5s ease infinite;
    border-radius: var(--es-radius-sm);
}

@keyframes eduscript-skeleton-shine {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ACCESSIBILITAT
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .eduscript-app *,
    .eduscript-app *::before,
    .eduscript-app *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus visible per a navegació amb teclat */
.eduscript-app :focus-visible {
    outline: 2px solid var(--es-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════
   COMPATIBILITAT AMB TEMES WORDPRESS
   ═══════════════════════════════════════════════════════════════════════ */

/* Prevenir conflictes amb estils del tema */
.eduscript-app input:not([type="radio"]):not([type="checkbox"]),
.eduscript-app select,
.eduscript-app textarea,
.eduscript-app button {
    font-family: var(--es-font) !important;
    -webkit-appearance: none;
}

.eduscript-app h2,
.eduscript-app h3 {
    margin: 0;
    padding: 0;
    border: none;
    font-family: var(--es-font);
}

.eduscript-app a {
    text-decoration: none;
}

.eduscript-app button {
    font-family: var(--es-font);
}

/* ═══════════════════════════════════════════════════════════════════════
   BOTÓ DE CANVI DE TEMA (clar / fosc)
   ═══════════════════════════════════════════════════════════════════════ */
/* Botó de canvi de tema, integrat a la dreta de la capçalera de la primera
   targeta (el títol té flex-grow:1 i l'empeny a la dreta). */
.eduscript-theme-toggle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    color: var(--es-text-secondary);
    background: var(--es-bg-card);
    border: 1.5px solid var(--es-border);
    border-radius: var(--es-radius-pill);
    box-shadow: var(--es-shadow-sm);
    cursor: pointer;
    transition: var(--es-transition);
}

.eduscript-theme-toggle:hover {
    color: var(--es-primary);
    border-color: var(--es-border-hover);
    background: var(--es-bg-hover);
}

.eduscript-theme-toggle__icon {
    display: none;
}

/* En clar es mostra la lluna (anar a fosc); en fosc, el sol (anar a clar) */
.eduscript-app:not([data-theme="dark"]) .eduscript-theme-toggle__moon {
    display: block;
}

.eduscript-app[data-theme="dark"] .eduscript-theme-toggle__sun {
    display: block;
}

/* ═══════════════════════════════════════════════════════════════════════
   FILTRES DE L'HISTORIAL (cerca + plantilla)
   ═══════════════════════════════════════════════════════════════════════ */
.eduscript-history-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.eduscript-history-search-wrap {
    position: relative;
    flex: 1 1 240px;
    min-width: 180px;
}

.eduscript-history-search-icon {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: var(--es-text-muted);
    pointer-events: none;
}

/* Selector amb prou pes (dues classes) per guanyar a .eduscript-input i
   garantir el coixí esquerre que separa la lupa del text. */
.eduscript-history-search-wrap .eduscript-history-search {
    padding-left: 44px;
}

/* Amagar la creueta nativa del input[type=search] per coherència visual */
.eduscript-history-search::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.eduscript-history-template-wrap {
    flex: 0 1 240px;
    min-width: 180px;
}

.eduscript-history-empty {
    padding: 20px 4px;
    text-align: center;
    font-size: 13.5px;
    color: var(--es-text-muted);
}

@media (max-width: 600px) {
    .eduscript-history-search-wrap,
    .eduscript-history-template-wrap {
        flex-basis: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   MODAL DE LA MOSTRA D'ESTIL (to «personal»)
   ═══════════════════════════════════════════════════════════════════════ */

.eduscript-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9990; /* per sota del toast (10000), que ha de quedar visible */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(61, 57, 41, 0.45);
    backdrop-filter: blur(2px);
}

/* L'overlay usa display:flex: cal reafirmar el [hidden] perquè guanyi. */
.eduscript-modal-overlay[hidden] {
    display: none;
}

.eduscript-modal {
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    background: var(--es-bg-card);
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-lg);
    box-shadow: var(--es-shadow-lg);
    font-family: var(--es-font);
}

.eduscript-modal__header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.eduscript-modal__header .eduscript-card__title {
    flex: 1;
    margin: 0;
}

.eduscript-modal__close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--es-radius-sm);
    background: transparent;
    color: var(--es-text-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: var(--es-transition);
}

.eduscript-modal__close:hover {
    background: var(--es-bg-hover);
    color: var(--es-text);
}

.eduscript-modal__help {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--es-text-secondary);
}

.eduscript-style-textarea {
    min-height: 220px;
    resize: vertical;
}

/* Comptador de caràcters: 3 estats (buit / massa curt / correcte) */
.eduscript-style-counter {
    margin: 0;
    font-size: 12.5px;
    color: var(--es-text-muted);
}

.eduscript-style-counter--warn {
    color: var(--es-error);
}

.eduscript-style-counter--ok {
    color: var(--es-success);
    font-weight: 600;
}

.eduscript-modal__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.eduscript-style-delete {
    color: var(--es-error);
}

@media (max-width: 600px) {
    .eduscript-modal {
        padding: 18px;
    }
    .eduscript-modal__actions .eduscript-btn {
        flex: 1 1 auto;
    }
}

/* ─── Nom de l'àrea (titulet / dins del text / lliure) ─────────────────── */

.eduscript-nom-area .eduscript-segment {
    margin-top: 2px;
}

/* Sub-opció «nom en negreta dins del text»: només visible en mode text */
.eduscript-nom-area-negreta {
    display: none;
    margin-top: 10px;
}

.eduscript-nom-area-negreta--visible {
    display: flex;
}

/* ═══════════════════════════════════════════════════════════════════════
   MODE COOPERATIU ([eduscript_aula])
   Tria de classe → alumne/a → valoració compartida amb desat automàtic
   ═══════════════════════════════════════════════════════════════════════ */

/* Ruta de navegació (classes › classe › alumne) */
.eduscript-coop-classes__grid,
.eduscript-coop-alumnes__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 1100px) {
    .eduscript-coop-classes__grid,
    .eduscript-coop-alumnes__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .eduscript-coop-classes__grid,
    .eduscript-coop-alumnes__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Encapçalament d'escola dins la graella de classes: ocupa tota la fila
   (només apareix quan hi ha classes de més d'una escola). */
.eduscript-coop-escola-head {
    grid-column: 1 / -1;
    margin: 6px 0 0;
    padding-bottom: 6px;
    border-bottom: 1.5px solid var(--es-border);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--es-text-secondary);
}

.eduscript-coop-escola-head:first-child {
    margin-top: 0;
}

.eduscript-coop-classcard,
.eduscript-coop-alumnecard {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 16px;
    background: var(--es-bg-input);
    border: 1.5px solid var(--es-border);
    border-radius: var(--es-radius-md);
    font-family: var(--es-font);
    text-align: left;
    cursor: pointer;
    transition: var(--es-transition);
}

.eduscript-coop-classcard:hover,
.eduscript-coop-alumnecard:hover {
    border-color: var(--es-primary);
    background: var(--es-primary-subtle);
    box-shadow: var(--es-shadow-sm);
}

.eduscript-coop-classcard__nom,
.eduscript-coop-alumnecard__nom {
    font-weight: 700;
    font-size: 1rem;
    color: var(--es-text);
}

.eduscript-coop-classcard__meta,
.eduscript-coop-alumnecard__meta {
    font-size: 0.78rem;
    color: var(--es-text-secondary);
    white-space: nowrap;
}

/* «⭐ ets tutor/a»: línia pròpia sota el nombre d'alumnes, sense partir-se */
.eduscript-coop-classcard__tutor {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--es-warning, #b45309);
    white-space: nowrap;
}

/* Alumne amb valoracions començades / alumne actiu */
.eduscript-coop-alumnecard--started {
    border-color: var(--es-success);
}

.eduscript-coop-alumnecard--started .eduscript-coop-alumnecard__meta {
    color: var(--es-success);
    font-weight: 600;
}

.eduscript-coop-alumnecard--active {
    border-color: var(--es-primary);
    background: var(--es-primary-subtle);
    box-shadow: var(--es-shadow-focus);
}

/* Selector d'avaluació a la capçalera del pas 2 */
/* Les pastilles van al mig de la seva franja: repartides a parts iguals
   quedaven arrapades a l'esquerra amb un badall a la dreta. */
.eduscript-coop-avaluacio {
    justify-content: center;
    flex-wrap: wrap;
}

/* Les pastilles («1a avaluació»…) no s'han de partir mai en dues línies: text
   en una sola línia i amplada donada pel contingut, no repartida a parts
   iguals (que era el que feia que es trenquessin). */
.eduscript-coop-avaluacio .eduscript-segment__option {
    flex: 0 0 auto;
}

.eduscript-coop-avaluacio .eduscript-segment__btn {
    white-space: nowrap;
    padding: 7px 14px;
}

/* Indicador de desat automàtic */
.eduscript-coop-savestate {
    margin-left: auto;
    font-size: 0.8125rem;
    font-weight: 600;
}

.eduscript-coop-savestate--saving {
    color: var(--es-warning);
}

.eduscript-coop-savestate--ok {
    color: var(--es-success);
}

/* Qui ha desat cada àrea per últim cop */
.eduscript-coop-area-who {
    margin-left: 8px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--es-text-muted);
    white-space: nowrap;
}

/* Text d'ajuda i estats buits */
.eduscript-coop-eval-hint {
    margin: 0 0 16px;
    font-size: 0.875rem;
    color: var(--es-text-secondary);
    line-height: 1.5;
}

.eduscript-coop-empty {
    margin: 0;
    padding: 20px;
    background: var(--es-bg-input);
    border: 1px dashed var(--es-border);
    border-radius: var(--es-radius-md);
    color: var(--es-text-secondary);
    font-size: 0.9rem;
}

/* Al mode cooperatiu les àrees ocupen tot l'ample i no tenen checkbox */
.eduscript-coop-areas .eduscript-area {
    width: 100%;
}

/* Targeta d'inici de sessió */
.eduscript-coop-login {
    text-align: center;
    padding: 40px 24px;
}

.eduscript-coop-login p {
    color: var(--es-text-secondary);
    max-width: 480px;
    margin: 12px auto;
}

/* ─── Capçalera compacta amb el nom de l'escola destacat ───────────────── */

.eduscript-coop-header {
    padding: 14px 20px 10px;
}

.eduscript-coop-header .eduscript-card__header {
    margin-bottom: 4px;
    gap: 10px;
}

.eduscript-coop-header .eduscript-card__icon {
    width: 30px;
    height: 30px;
}

.eduscript-coop-header__titles {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.eduscript-coop-header__escola {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--es-primary-dark);
    line-height: 1.2;
}

.eduscript-coop-header__sub {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--es-text-muted);
}

/* ─── Pas 2: selector de mode, select d'alumnes i resum d'àrees ────────── */

/* Títol de la valoració: «Valoració de» queda en un to secundari, el nom de
   l'alumne/a és el que destaca i el trimestre va en una etiqueta a part. Tot
   seguit i en negreta era una sola taca de text difícil de llegir. */
#eduscript-coop-eval-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 500;
    color: var(--es-text-secondary);
}

.eduscript-coop-eval-title__nom {
    font-weight: 700;
    color: var(--es-text);
}

.eduscript-coop-eval-title__av {
    padding: 3px 11px;
    font-size: 13px;
    font-weight: 600;
    color: var(--es-primary-dark);
    background: var(--es-primary-light);
    border: 1px solid rgba(217, 119, 87, 0.28);
    border-radius: var(--es-radius-pill);
}

@media (max-width: 480px) {
    #eduscript-coop-eval-title {
        font-size: 16px;
        gap: 6px;
    }
}

.eduscript-coop-alumnes__header {
    flex-wrap: wrap;
    row-gap: 10px;
}

.eduscript-coop-mode .eduscript-segment__option {
    flex: 0 0 auto;
}

.eduscript-coop-mode .eduscript-segment__btn {
    white-space: nowrap;
    padding: 7px 14px;
}

.eduscript-coop-picker {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.eduscript-coop-alumne-wrap {
    max-width: 420px;
}

/* ─── Mostra d'estil del tutor (to «personal» de l'escola) ─────────────── */

.eduscript-coop-estil {
    margin-bottom: 16px;
}

.eduscript-coop-estil__toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    background: var(--es-bg-input);
    border: 1.5px solid var(--es-border);
    border-radius: var(--es-radius-md);
    font-family: var(--es-font);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--es-text);
    cursor: pointer;
    transition: var(--es-transition);
    text-align: left;
}

.eduscript-coop-estil__toggle:hover {
    border-color: var(--es-primary);
}

.eduscript-coop-estil__estat {
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--es-warning, #b45309);
}

.eduscript-coop-estil__estat--ok {
    color: var(--es-success);
}

.eduscript-coop-estil__body {
    padding: 14px 2px 0;
}

/* Nom de l'alumne/a ben visible al panell del tutor */
.eduscript-coop-tutor-alumne {
    margin: 0 0 16px;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--es-primary-dark);
}

/* ─── Mode «per àrea»: taula d'alumnes × ítems amb selects de nota ─────── */

/* Casella «notes d'aquesta àrea posades» */
.eduscript-coop-acomplet {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 14px;
    border: 1.5px solid var(--es-border);
    border-radius: var(--es-radius-md);
    background: var(--es-bg-input);
    font-size: 0.875rem;
    cursor: pointer;
}

.eduscript-coop-acomplet input {
    width: 18px;
    height: 18px;
    accent-color: var(--es-primary);
}

.eduscript-coop-acomplet strong {
    color: var(--es-text);
}

.eduscript-coop-acomplet__hint {
    color: var(--es-text-secondary);
    font-style: italic;
}

.eduscript-coop-ataula-wrap {
    overflow-x: auto;
    border: 1.5px solid var(--es-border);
    border-radius: var(--es-radius-md);
}

.eduscript-coop-ataula {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--es-font);
    font-size: 0.875rem;
}

.eduscript-coop-ataula th {
    background: var(--es-bg-input);
    color: var(--es-text-secondary);
    font-weight: 600;
    text-align: center;
    padding: 10px 12px;
    white-space: nowrap;
    border-bottom: 1.5px solid var(--es-border);
    vertical-align: middle;
}

/* Columnes de nota (global i ítems): totes amb la MATEIXA amplada */
.eduscript-coop-ataula th.eduscript-coop-ataula__col {
    width: 112px;
    min-width: 112px;
    max-width: 112px;
    padding: 10px 8px;
    white-space: normal;
}

/* Títol de l'ítem: fins a dues línies i, si no hi cap, escurçat amb «…»
   (el nom sencer es veu al tooltip del ratolí) */
.eduscript-coop-ataula__th {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    line-height: 1.25;
    overflow-wrap: break-word;
}

.eduscript-coop-ataula td {
    padding: 8px 12px;
    text-align: center;
    border-bottom: 1px solid var(--es-border);
    background: var(--es-bg-card);
}

.eduscript-coop-ataula tbody tr:last-child td {
    border-bottom: none;
}

.eduscript-coop-ataula__num {
    color: var(--es-text-muted);
    font-weight: 600;
    width: 44px;
}

.eduscript-coop-ataula th.eduscript-coop-ataula__nom,
.eduscript-coop-ataula td.eduscript-coop-ataula__nom {
    text-align: left;
    font-weight: 700;
    color: var(--es-text);
    white-space: nowrap;
}

/* La nota global destaca amb un fons suau, com al mockup */
.eduscript-coop-ataula th.eduscript-coop-ataula__global,
.eduscript-coop-ataula td.eduscript-coop-ataula__global {
    background: var(--es-primary-subtle);
}

/* Alumne amb notes posades: el nom en verd */
.eduscript-coop-atrow--done td.eduscript-coop-ataula__nom {
    color: var(--es-success);
}

.eduscript-coop-anota {
    font-family: var(--es-font);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--es-text);
    background: var(--es-bg-input);
    border: 1.5px solid var(--es-border);
    border-radius: var(--es-radius-sm);
    padding: 6px 8px;
    cursor: pointer;
    transition: var(--es-transition);
}

.eduscript-coop-anota:hover {
    border-color: var(--es-border-hover);
}

.eduscript-coop-anota:focus {
    outline: none;
    border-color: var(--es-border-focus);
    box-shadow: var(--es-shadow-focus);
}


/* ─── Qui hi ha treballant ara ─────────────────────────────────────────────
   Barra sota el menú de la classe amb els altres mestres que hi són en
   aquest moment i on són. No bloqueja res: només fa que ningú escrigui al
   mateix lloc que un altre sense saber-ho. */

/* Va enganxada al menú, com una tercera franja de la mateixa barra: la
   capçalera de la classe té overflow ocult i un marge hi obriria un solc. */
.eduscript-presencia {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: var(--es-bg-card);
    border-top: 1.5px solid var(--es-border);
}

.eduscript-presencia__punt {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--es-success);
    box-shadow: 0 0 0 3px rgba(92, 138, 88, 0.18);
    animation: eduscript-batec 2.4s ease-in-out infinite;
}

@keyframes eduscript-batec {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

.eduscript-presencia__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--es-text-secondary);
}

.eduscript-presencia__qui {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 4px;
    background: var(--es-bg-input);
    border: 1.5px solid var(--es-border);
    border-radius: var(--es-radius-pill);
    font-size: 0.8125rem;
    color: var(--es-text);
}

/* Som exactament al mateix lloc: l'únic cas en què ens podem trepitjar */
.eduscript-presencia__qui--xoc {
    border-color: var(--es-warning);
    background: #FDF6E7;
}

.eduscript-presencia__ini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--es-primary);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.eduscript-presencia__nom { font-weight: 600; }

.eduscript-presencia__on {
    color: var(--es-text-secondary);
    font-size: 0.75rem;
}

/* Avís de dins de la vista per àrea */
.eduscript-presencia-avis {
    margin: 0 0 14px;
    padding: 10px 14px;
    background: #FDF6E7;
    border: 1.5px solid var(--es-warning);
    border-radius: var(--es-radius-md);
    font-size: 0.875rem;
    color: var(--es-text);
}

/* Marca a cada àrea: qui la té oberta ara */
/* ─── Tria d'àrea (Avaluació · per àrea) ──────────────────────────────────
   Botons petits l'un al costat de l'altre, com les pestanyes d'una carpeta:
   les àrees són poques i el nom ja les identifica. Abans eren targetes
   grosses en graella i omplien mitja pantalla per no dir gaire res. */
.eduscript-coop-areapills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

/* Terracota suau, no pas ple: són deu botons de cop i el color a tot drap
   cansava la vista. El que porta el color fort és el que s'ha triat. */
.eduscript-coop-areapill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    font-family: var(--es-font);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--es-primary-dark);
    background: var(--es-primary-light);
    border: 1.5px solid transparent;
    border-radius: var(--es-radius-sm);
    cursor: pointer;
    transition: var(--es-transition);
}

.eduscript-coop-areapill:hover {
    border-color: var(--es-primary);
    box-shadow: var(--es-shadow-sm);
}

.eduscript-coop-areapill:focus-visible {
    outline: none;
    box-shadow: var(--es-shadow-focus);
}

.eduscript-coop-areapill__pany {
    font-size: 0.78rem;
}

/* L'àrea que s'està valorant ara: aquesta sí que va plena de color. */
.eduscript-coop-areapill--on {
    color: #fff;
    background: var(--es-primary);
    border-color: var(--es-primary);
}

/* Àrea d'un altre mestre: només consulta, o sigui que no crida l'atenció. */
.eduscript-coop-areapill--aliena {
    color: var(--es-text-secondary);
    background: var(--es-bg-input);
    border-color: var(--es-border);
}

.eduscript-coop-areapill--aliena:hover {
    color: var(--es-text);
    background: var(--es-bg-hover);
    border-color: var(--es-border-hover);
}

.eduscript-coop-areapill--aliena.eduscript-coop-areapill--on {
    border-color: var(--es-primary);
    background: var(--es-primary-subtle);
}

/* Hi ha algú altre treballant en aquesta àrea ara mateix: amb el fons ja
   suau, la vora clara no es veia i ha de ser d'un to que hi destaqui. */
.eduscript-coop-areapill.eduscript-coop-area--viva {
    border-color: var(--es-accent-warm);
}

@media (max-width: 480px) {
    .eduscript-coop-areapill {
        padding: 8px 12px;
        font-size: 0.84rem;
    }
}

.eduscript-presencia-marca {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 8px;
    padding: 2px 8px;
    background: var(--es-primary-subtle);
    border: 1.5px solid var(--es-primary-light);
    border-radius: var(--es-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--es-primary-dark);
    white-space: nowrap;
}

.eduscript-coop-area--viva > .eduscript-area__head {
    box-shadow: inset 3px 0 0 var(--es-primary);
}

/* Tria d'àrea (vista per àrea): la marca de presència va dins del botó */
.eduscript-coop-areapill .eduscript-presencia-marca {
    margin-right: 0;
    padding: 1px 6px;
    font-size: 0.68rem;
    background: var(--es-bg-card);
}

.eduscript-coop-areapill--on .eduscript-presencia-marca {
    color: #fff;
    background: rgba(255, 255, 255, 0.24);
    border-color: rgba(255, 255, 255, 0.38);
}

/* Punt de la tria de classe: hi ha algú treballant-hi ara */
.eduscript-coop-classbtn__gent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 14px;
    height: 14px;
    margin-left: 5px;
    padding: 0 3px;
    border-radius: var(--es-radius-pill);
    background: var(--es-success);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    vertical-align: middle;
}

.eduscript-app[data-theme="dark"] .eduscript-presencia__qui--xoc,
.eduscript-app[data-theme="dark"] .eduscript-presencia-avis {
    background: #3A2C14;
}

@media (prefers-reduced-motion: reduce) {
    .eduscript-presencia__punt { animation: none; }
}

@media (max-width: 640px) {
    .eduscript-presencia__on { display: none; }
}

/* ─── Taula d'avaluacions de la classe (pàgina «Taula») ────────────────────
   Vista de consulta: alumnes en files, àrees en columnes. Les dues primeres
   columnes queden enganxades a l'esquerra quan la taula és més ampla que la
   pantalla, perquè no es perdi mai de vista de qui és cada fila. */

.eduscript-taula-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 14px 0;
}

.eduscript-taula-vista {
    flex: 0 0 auto;
    min-width: 190px;
}

.eduscript-taula-barra__accions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

/* Tria d'àrees: un desplegable que no mou la resta de la pàgina en obrir-se */
.eduscript-taula-arees {
    position: relative;
    flex: 0 0 auto;
}

.eduscript-taula-arees__summary {
    cursor: pointer;
    list-style: none;
    padding: 10px 14px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--es-text-secondary);
    background: var(--es-bg-input);
    border: 1.5px solid var(--es-border);
    border-radius: var(--es-radius-sm);
    transition: var(--es-transition);
}

.eduscript-taula-arees__summary::-webkit-details-marker { display: none; }

.eduscript-taula-arees__summary:hover {
    border-color: var(--es-border-hover);
    color: var(--es-text);
}

.eduscript-taula-arees[open] .eduscript-taula-arees__summary {
    border-color: var(--es-border-focus);
    color: var(--es-text);
}

.eduscript-taula-arees__llista {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 0;
    min-width: 240px;
    max-height: 320px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    background: var(--es-bg-card);
    border: 1.5px solid var(--es-border);
    border-radius: var(--es-radius-md);
    box-shadow: var(--es-shadow-md);
}

.eduscript-taula-arees__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    font-size: 0.875rem;
    color: var(--es-text);
    border-radius: var(--es-radius-sm);
    cursor: pointer;
}

.eduscript-taula-arees__item:hover { background: var(--es-bg-hover); }

.eduscript-taula-arees__totes {
    margin-top: 6px;
    padding: 7px 10px;
    font-family: var(--es-font);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--es-primary);
    background: none;
    border: 1.5px dashed var(--es-border);
    border-radius: var(--es-radius-sm);
    cursor: pointer;
}

.eduscript-taula-arees__totes:hover { border-color: var(--es-primary); }

.eduscript-taula-wrap {
    overflow-x: auto;
    border: 1.5px solid var(--es-border);
    border-radius: var(--es-radius-md);
}

.eduscript-taula {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--es-font);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

.eduscript-taula th {
    background: var(--es-bg-input);
    color: var(--es-text-secondary);
    font-weight: 600;
    font-size: 0.8125rem;
    text-align: center;
    padding: 10px 8px;
    vertical-align: bottom;
    border-bottom: 1.5px solid var(--es-border);
}

.eduscript-taula th.eduscript-taula__col {
    width: 78px;
    min-width: 78px;
}

/* El nom de l'àrea, fins a tres línies i escurçat si encara no hi cap */
.eduscript-taula__th {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    line-height: 1.25;
    overflow-wrap: break-word;
}

.eduscript-taula td {
    padding: 6px 8px;
    text-align: center;
    background: var(--es-bg-card);
    border-bottom: 1px solid var(--es-border);
}

.eduscript-taula tbody tr:nth-child(even) td { background: var(--es-bg); }

.eduscript-taula td.eduscript-taula__num,
.eduscript-taula th.eduscript-taula__num {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 42px;
    min-width: 42px;
    color: var(--es-text-muted);
    font-weight: 600;
    text-align: center;
}

.eduscript-taula td.eduscript-taula__nom,
.eduscript-taula th.eduscript-taula__nom {
    position: sticky;
    left: 42px;
    z-index: 2;
    /* Que la columna dels noms no s'endugui l'espai que sobra: amb poques
       àrees, el buit entre el nom i la primera nota quedava enorme. */
    width: 1%;
    text-align: left;
    font-weight: 700;
    color: var(--es-text);
    white-space: nowrap;
    box-shadow: 1px 0 0 var(--es-border);
}

/* La columna de la mitjana destaca amb un fons suau (guanya a la fila
   alternada gràcies a la especificitat, sense !important). */
.eduscript-taula th.eduscript-taula__mitjana,
.eduscript-taula tbody tr td.eduscript-taula__mitjana,
.eduscript-taula tbody tr:nth-child(even) td.eduscript-taula__mitjana {
    background: var(--es-primary-subtle);
}

.eduscript-app[data-theme="dark"] .eduscript-taula th.eduscript-taula__mitjana,
.eduscript-app[data-theme="dark"] .eduscript-taula tbody tr td.eduscript-taula__mitjana,
.eduscript-app[data-theme="dark"] .eduscript-taula tbody tr:nth-child(even) td.eduscript-taula__mitjana {
    background: rgba(217, 119, 87, 0.10);
}

.eduscript-taula__peu td {
    background: var(--es-bg-input);
    border-top: 1.5px solid var(--es-border);
    border-bottom: none;
    font-weight: 700;
    color: var(--es-text);
}

.eduscript-taula tfoot td.eduscript-taula__nom { white-space: nowrap; }

/* La nota, dins d'una pastilla del color del seu nivell */
.eduscript-nota {
    display: inline-block;
    min-width: 38px;
    padding: 3px 7px;
    /* Amb min-width, sense això les sigles queden arrambades a l'esquerra
       de la pastilla i la columna es veu desalineada. */
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    border-radius: var(--es-radius-sm);
    background: var(--es-bg-input);
    color: var(--es-text-muted);
}

/* Mateixa escala pastel que la insígnia d'assoliment de la barra de l'àrea
   (.eduscript-coop-area-ass): verd, taronja, groc i vermell. */
.eduscript-nota--1 { background: #fee2e2; color: #991b1b; }  /* NA · vermell */
.eduscript-nota--2 { background: #fef9c3; color: #854d0e; }  /* AS · groc */
.eduscript-nota--3 { background: #ffedd5; color: #9a3412; }  /* AN · taronja */
.eduscript-nota--4 { background: #dcfce7; color: #166534; }  /* AE · verd */

/* Nota treta de la mitjana dels ítems: només el contorn, perquè es vegi que
   no l'ha posada ningú a mà. */
.eduscript-nota--calc {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px currentColor;
}

.eduscript-nota--cap {
    background: transparent;
    color: var(--es-text-muted);
    font-weight: 600;
}

.eduscript-nota__ast {
    font-size: 0.75em;
    vertical-align: super;
    opacity: 0.75;
}

.eduscript-taula-llegenda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 14px 0 0;
    font-size: 0.8125rem;
    color: var(--es-text-secondary);
}

.eduscript-taula-llegenda__sep { color: var(--es-text-muted); }

/* Les dues explicacions (nota calculada i mitjana incompleta) van cadascuna a
   la seva línia, sota la fila dels quatre nivells, sense tornar a separar-se. */
.eduscript-taula-llegenda--nota { margin-top: 6px; }

.eduscript-taula-buit {
    margin: 0;
    padding: 28px 16px;
    text-align: center;
    color: var(--es-text-secondary);
    background: var(--es-bg-input);
    border: 1.5px dashed var(--es-border);
    border-radius: var(--es-radius-md);
}

/* En fosc, els fons clars de les notes s'apaguen: es conserva el to, no la
   lluminositat, com a la resta del codi de colors de l'eina. */
.eduscript-app[data-theme="dark"] .eduscript-nota--1 { background: #3A1F1C; color: #F0A79C; }  /* NA · vermell */
.eduscript-app[data-theme="dark"] .eduscript-nota--2 { background: #38321A; color: #E8DA8E; }  /* AS · groc */
.eduscript-app[data-theme="dark"] .eduscript-nota--3 { background: #3A2916; color: #F0B589; }  /* AN · taronja */
.eduscript-app[data-theme="dark"] .eduscript-nota--4 { background: #17331F; color: #8FD6A5; }  /* AE · verd */
.eduscript-app[data-theme="dark"] .eduscript-nota--calc { background: transparent; }

@media (max-width: 640px) {
    .eduscript-taula-barra__accions { margin-left: 0; width: 100%; }
    .eduscript-taula-vista { width: 100%; }
    .eduscript-taula td.eduscript-taula__nom,
    .eduscript-taula th.eduscript-taula__nom { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
}

/* ─── Vestíbul d'accés ([eduscript_acces]) ─────────────────────────────── */

.eduscript-acces__card {
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
}

.eduscript-acces__portes {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 18px;
}

.eduscript-acces__portes .eduscript-btn {
    justify-content: center;
    text-decoration: none;
}

/* ─── Informes desats (eina cooperativa, panell del tutor/a) ───────────── */

/* Botó de desar l'informe: mentre no hi ha canvis, queda apagat */
#eduscript-coop-save:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Indicador de desat sota el quadre de l'informe */
.eduscript-coop-desat {
    margin: 8px 0 0;
    font-size: 0.8125rem;
    color: var(--es-text-muted);
    min-height: 1.2em;
}

.eduscript-coop-desat--ok {
    color: var(--es-success);
}

.eduscript-coop-desat--error {
    color: var(--es-error);
}

/* Llista d'informes ja desats */
.eduscript-coop-desats-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.eduscript-coop-desat-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 14px;
    background: var(--es-bg-input);
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-md);
}

.eduscript-coop-desat-item--actiu {
    border-color: var(--es-border-focus);
    background: var(--es-bg-card);
}

.eduscript-coop-desat-item__info {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.eduscript-coop-desat-item__nom {
    font-weight: 600;
    color: var(--es-text);
}

.eduscript-coop-desat-item__data {
    font-size: 0.8125rem;
    color: var(--es-text-muted);
}

.eduscript-coop-desat-item__accions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.eduscript-coop-desat-item__esborra {
    color: var(--es-error);
}

@media (max-width: 560px) {
    .eduscript-coop-desat-item {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   MODE «A PARTIR DE FRASES» (redacció sense IA)
   ═══════════════════════════════════════════════════════════════════ */

/* Opcions que només tenen sentit amb la redacció per IA: s'amaguen quan el
   mestre tria «A partir de frases» (tipus, to, mode tutor/especialista,
   recomanacions i el comptador de crèdits). */
/* Amb frases no hi ha IA que redacti el cos de l'informe, així que el tipus,
   el to i el mode tutor/especialista no hi pinten res. Les recomanacions SÍ
   que hi són: les redacta la IA a part i costen 0,1 crèdits. */
.eduscript-app--frases .eduscript-field--longitud,
.eduscript-app--frases .eduscript-field--to,
.eduscript-app--frases .eduscript-field--mode {
    display: none;
}

/* El bloc sencer del mode, amb el seu títol: sense el selector a dins no hi
   pinta res. (Els altres dos comparteixen secció amb la Redacció, que sí que
   es fa servir en mode frases, i per això només s'amaguen ells.) */
.eduscript-app--frases .eduscript-config-section--mode {
    display: none;
}

/* En mode frases el comptador es queda buit (l'informe no gasta crèdits) i
   el CSS ja l'amaga amb :empty; l'únic que hi arriba a sortir és l'avís que
   no en queden per a les recomanacions, i aquest sí que s'ha de veure. */

/* En mode frases, els ítems poden desplegar el panell de frases a sota. */
.eduscript-app--frases .eduscript-item {
    flex-wrap: wrap;
}

/* El nom de l'ítem és clicable: obre les 4 caixes de frases. */
.eduscript-app--frases .eduscript-item__name {
    cursor: pointer;
}

.eduscript-app--frases .eduscript-item__name:hover {
    color: var(--es-primary);
}

/* Fletxeta davant del nom: l'única pista que la barra s'obre i que a dins
   s'hi escriuen les quatre frases. Gira quan el panell és obert. */
.eduscript-app--frases .eduscript-item__name::before,
.eduscript-item__name--obrible::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 6px;
    vertical-align: 1px;
    border-top: 3.5px solid transparent;
    border-bottom: 3.5px solid transparent;
    border-left: 5px solid var(--es-text-muted);
    transition: transform 0.15s ease, border-left-color 0.15s ease;
}

.eduscript-app--frases .eduscript-item__name:hover::before,
.eduscript-item__name--obrible:hover::before {
    border-left-color: var(--es-primary);
}

.eduscript-item--frases-open .eduscript-item__name::before {
    transform: rotate(90deg);
    border-left-color: var(--es-primary);
}

/* Comptador de frases escrites de l'ítem («✎ 2/4»). Només en mode frases. */
.eduscript-item__frases-badge {
    display: none;
}

.eduscript-app--frases .eduscript-item__frases-badge:not([hidden]) {
    display: inline-block;
    flex-shrink: 0;
    padding: 1px 7px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--es-primary);
    background: var(--es-primary-light);
    border-radius: 999px;
}

/* Panell amb les 4 caixes de frases (AE · AN · AS · NA) d'un ítem. */
.eduscript-item-frases {
    display: none;
}

.eduscript-app--frases .eduscript-item-frases:not([hidden]),
.eduscript-coop-frases-item .eduscript-item-frases:not([hidden]) {
    display: grid;
    gap: 6px;
    flex-basis: 100%;
    width: 100%;
    margin: 2px 0 8px;
    padding: 10px 12px;
    background: var(--es-bg-input);
    border: 1px dashed var(--es-border);
    border-radius: var(--es-radius-md);
}

.eduscript-item-frases__row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.eduscript-item-frases__lvl {
    flex: 0 0 28px;
    padding-top: 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--es-text-muted);
    cursor: help;
}

.eduscript-item-frases__input {
    flex: 1 1 auto;
    min-width: 0;
    /* Dues línies senceres com a mínim: les frases dels ítems solen ocupar-ne
       dues, i amb una sola quedaven tallades i amb barra de desplaçament. */
    min-height: 58px;
    padding: 8px 11px;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.4;
    color: var(--es-text);
    background: var(--es-bg-card);
    border: 1.5px solid var(--es-border);
    border-radius: var(--es-radius-md);
    resize: vertical;
    transition: var(--es-transition);
}

.eduscript-item-frases__input:focus {
    outline: none;
    border-color: var(--es-border-focus);
    box-shadow: var(--es-shadow-focus);
}

/* Nota d'ajuda del mode frases (plegable). Només visible en mode frases. */
.eduscript-frases-help {
    display: none;
    margin-bottom: 18px;
    background: var(--es-bg-input);
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-md);
    overflow: hidden;
}

.eduscript-app--frases .eduscript-frases-help,
.eduscript-coop .eduscript-frases-help {
    display: block;
}

.eduscript-frases-help__summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.eduscript-frases-help__summary::-webkit-details-marker {
    display: none;
}

.eduscript-frases-help__summary:hover {
    background: var(--es-bg-hover);
}

.eduscript-frases-help__title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--es-text);
}

.eduscript-frases-help__hint {
    flex: 1;
    font-size: 12px;
    font-weight: 400;
    color: var(--es-text-muted);
}

.eduscript-frases-help__chevron {
    flex-shrink: 0;
    color: var(--es-text-muted);
    transition: transform 0.2s ease;
}

.eduscript-frases-help[open] .eduscript-frases-help__chevron {
    transform: rotate(180deg);
}

.eduscript-frases-help__body {
    padding: 0 14px 14px;
    border-top: 1px solid var(--es-border);
}

.eduscript-frases-help__intro,
.eduscript-frases-help__note {
    margin: 12px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--es-text-secondary);
}

.eduscript-frases-help__table {
    width: 100%;
    margin-top: 12px;
    border-collapse: collapse;
    font-size: 12.5px;
    /* Amb l'amplada fixa les columnes respecten el que se'ls demana i el text
       s'hi ajusta: si no, els exemples llargs estiraven la taula fora de la
       targeta i quedaven tallats. */
    table-layout: fixed;
    word-break: break-word;
}

.eduscript-frases-help__table th {
    padding: 6px 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--es-text-muted);
    text-align: left;
    border-bottom: 1px solid var(--es-border);
}

.eduscript-frases-help__table td {
    padding: 7px 8px;
    color: var(--es-text-secondary);
    line-height: 1.45;
    border-bottom: 1px dashed var(--es-border);
    vertical-align: top;
}

/* L'última fila tanca la taula amb el mateix filet que la capçalera: sense
   això la taula quedava oberta per sota i semblava tallada. */
.eduscript-frases-help__table tbody tr:last-child td {
    border-bottom: 1px solid var(--es-border);
}

/* Cada botó d'IA fa una cosa ben diferent de l'altre: se'ls dona aire perquè
   no es llegeixin com una llista seguida. */
.eduscript-frases-help__table--botons td {
    padding: 14px 8px;
}

.eduscript-frases-help__table--botons tbody tr:not(:last-child) td {
    border-bottom-style: solid;
}

/* Columnes de la primera cel·la: prou amples perquè els comodins hi càpiguen
   en una sola línia. */
.eduscript-frases-help__col1 { width: 138px; }
.eduscript-frases-help__col2 { width: 200px; }

/* Els tres comodins en majúscula van junts en una línia: ni la cel·la ni les
   pastilles s'han de partir. */
.eduscript-frases-help__nowrap,
.eduscript-frases-help__nowrap code {
    white-space: nowrap;
    overflow-wrap: normal;
}

.eduscript-frases-help__table code,
.eduscript-frases-help__note code {
    display: inline-block;
    /* En pantalles estretes, un comodí llarg ha de poder partir-se: si no,
       estira la taula i el text queda tallat. */
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: 1px 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--es-primary);
    background: var(--es-primary-light);
    border-radius: 4px;
}

.eduscript-frases-help__table strong {
    color: var(--es-text);
}

.eduscript-frases-help__table em {
    font-style: italic;
    color: var(--es-text-muted);
}

/* La taula d'ajuda pot no cabre en pantalles estretes: que faci scroll ella
   sola en comptes de desbordar la targeta. */
@media (max-width: 700px) {
    .eduscript-frases-help__body {
        overflow-x: auto;
    }

    .eduscript-frases-help__table {
        min-width: 520px;
    }
}

/* Els «continguts / hàbits GENERALS de la classe» només serveixen per donar
   context a la IA. En mode frases no hi ha IA, així que la casella s'amaga…
   EXCEPTE quan l'opció «Continguts treballats» està activa: llavors el text
   s'insereix com a paràgraf a l'inici de cada àrea i cal poder escriure'l. */
.eduscript-app--frases:not(.eduscript-app--continguts) .eduscript-area__continguts {
    display: none;
}

/* Sub-opcions de «Continguts treballats» (tal qual / adaptat): només amb el
   toggle actiu. En mode frases no hi ha IA i el text sempre va tal qual, així
   que el selector s'amaga també amb el toggle actiu. */
.eduscript-continguts-opts {
    display: none;
    margin-top: 12px;
}

.eduscript-continguts-opts--visible {
    display: block;
}

.eduscript-app--frases .eduscript-continguts-opts {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════
   AVALUACIÓ TANCADA (mode escola): només consulta
   ═══════════════════════════════════════════════════════════════════ */

.eduscript-coop-bloqueig {
    margin: 10px 0 0;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--es-text);
    background: var(--es-accent-warm-light, var(--es-bg-hover));
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-md);
}

/* Amb el trimestre tancat, tot el que edita queda inert: estrelles, notes,
   camps de text i botons d'afegir/esborrar/generar. El bloqueig de veritat
   el fa el servidor; això evita que el mestre s'hi trobi treballant en va. */
.eduscript-coop--bloquejat .eduscript-star,
.eduscript-coop--bloquejat .eduscript-grade,
.eduscript-coop--bloquejat .eduscript-item__remove,
.eduscript-coop--bloquejat .eduscript-item__edit,
.eduscript-coop--bloquejat .eduscript-item__drag,
.eduscript-coop--bloquejat .eduscript-item-add,
.eduscript-coop--bloquejat .eduscript-coop-pi,
.eduscript-coop--bloquejat .eduscript-coop-complet,
.eduscript-coop--bloquejat .eduscript-coop-generate,
.eduscript-coop--bloquejat .eduscript-coop-informe-actions {
    pointer-events: none;
    opacity: 0.45;
}

.eduscript-coop--bloquejat .eduscript-area__text,
.eduscript-coop--bloquejat .eduscript-area__continguts,
.eduscript-coop--bloquejat .eduscript-textarea {
    background: var(--es-bg-hover);
    color: var(--es-text-muted);
    pointer-events: none;
}

/* El selector d'avaluació SEMPRE ha de continuar funcionant: és l'única
   manera de tornar a un trimestre obert. Els radios, però, s'han de quedar
   amagats: si se'ls torna l'opacitat surten dibuixats damunt de les
   pastilles. */
.eduscript-coop--bloquejat .eduscript-coop-avaluacio,
.eduscript-coop--bloquejat .eduscript-coop-avaluacio * {
    pointer-events: auto;
}

.eduscript-coop--bloquejat .eduscript-coop-avaluacio,
.eduscript-coop--bloquejat .eduscript-coop-avaluacio *:not(input) {
    opacity: 1;
}

/* Capçalera de cada àrea a l'eina cooperativa. La capçalera general fa servir
   «space-between», que amb noms d'àrea de llargades diferents deixa cada dada
   en un lloc distint i es veu desendreçat. Aquí es fixa en columnes: el nom
   ocupa tot l'espai lliure i el comptador i el «✎ qui ho ha desat» queden
   sempre a la mateixa alçada, just abans de la fletxa. */
.eduscript-coop-area .eduscript-area__name {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Comptador d'ítems valorats: «⭐ 3/4» mentre en falten, «✅ 4/4» quan hi són
   tots. Amplada fixa perquè les xifres quedin en columna. */
.eduscript-coop-area-count {
    flex: 0 0 auto;
    min-width: 62px;
    padding: 2px 8px;
    font-size: 11.5px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    color: var(--es-text-muted);
    background: var(--es-bg-hover);
    border-radius: 999px;
}

.eduscript-coop-area-count--ok {
    color: var(--es-success);
    background: var(--es-success-bg);
}

/* Insígnia d'assoliment global a la barra de l'àrea (AE · AN · AS · NA), per a
   les escoles que el posen. Els colors segueixen l'escala de l'eina: verd a
   dalt, vermell a baix, i gris mentre no s'hi ha posat res. */
.eduscript-coop-area-ass {
    flex: 0 0 auto;
    min-width: 34px;
    margin-left: 6px;
    padding: 2px 8px;
    font-size: 11.5px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    color: var(--es-text-muted);
    background: var(--es-bg-hover);
    border-radius: 999px;
}

/* Tons pastel: fons suau i lletra fosca del mateix to, que es llegeix bé i no
   crida tant com el color ple (a la barra hi conviuen amb el comptador). */
.eduscript-coop-area-ass--4 { color: #166534; background: #dcfce7; }  /* AE · verd */
.eduscript-coop-area-ass--3 { color: #9a3412; background: #ffedd5; }  /* AN · taronja */
.eduscript-coop-area-ass--2 { color: #854d0e; background: #fef9c3; }  /* AS · groc */
.eduscript-coop-area-ass--1 { color: #991b1b; background: #fee2e2; }  /* NA · vermell */

/* El nom de qui ho ha desat: amplada reservada i alineat a la dreta, de manera
   que la columna existeix encara que l'àrea no s'hagi tocat mai. */
.eduscript-coop-area .eduscript-coop-area-who {
    flex: 0 0 auto;
    width: 155px;
    margin-left: 0;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* En pantalles estretes el nom de qui ho ha desat sobra abans que el
   comptador: primer s'encongeix i, si cal, desapareix. */
@media (max-width: 760px) {
    .eduscript-coop-area .eduscript-coop-area-who {
        width: 90px;
    }
}

@media (max-width: 560px) {
    .eduscript-coop-area .eduscript-coop-area-who {
        display: none;
    }
}

/* Botonera d'IA del panell de frases (generar, corregir, millorar, variacions) */
.eduscript-frases-ai {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px dashed var(--es-border);
}

.eduscript-frases-ai__btn {
    padding: 5px 10px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--es-text-secondary);
    background: var(--es-bg-card);
    border: 1.5px solid var(--es-border);
    border-radius: var(--es-radius-md);
    cursor: pointer;
    transition: var(--es-transition);
}

.eduscript-frases-ai__btn:hover:not(:disabled) {
    color: var(--es-primary);
    border-color: var(--es-primary);
    background: var(--es-primary-light);
}

.eduscript-frases-ai__btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.eduscript-frases-ai__cost {
    margin-left: auto;
    font-size: 11px;
    color: var(--es-text-muted);
}

/* Mentre la IA treballa, el panell queda inert amb un lleu esvaïment. */
.eduscript-item-frases--carregant {
    opacity: 0.6;
    pointer-events: none;
}

/* Frase marcada com a model per a «Variacions» (l'última on hi ha hagut el cursor) */
.eduscript-item-frases__row--model .eduscript-item-frases__lvl {
    color: var(--es-primary);
}

.eduscript-item-frases__row--model .eduscript-item-frases__input {
    border-color: var(--es-primary);
}

/* Subtítols dins de la nota d'ajuda de les frases */
/* Cada apartat de la nota (el nom, el gènere, els salts, els botons d'IA)
   parla d'una cosa diferent: van separats per un filet i prou aire perquè es
   vegi on s'acaba un i on comença el següent. */
.eduscript-frases-help__h {
    margin: 26px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--es-border);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--es-text);
}

.eduscript-frases-help__h:first-child {
    margin-top: 12px;
    padding-top: 0;
    border-top: none;
}

/* ─── Capçalera del quadern: els dos segments, la mateixa alçada ───────────
   El de les avaluacions porta emoji (🔒 obert/tancat) i el de mode no: sense
   una alçada mínima compartida, l'emoji fa la pastilla més alta i els dos
   grups queden desalineats. L'emoji va en un element propi i en línia amb el
   text, no a sobre (el botó és una columna per als subtítols d'altres
   pantalles, i aquí no en volem). */
.eduscript-coop-mode .eduscript-segment__btn,
.eduscript-coop-avaluacio .eduscript-segment__btn {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 42px;
    padding: 0 16px;
    font-size: 14px;
}

.eduscript-segment__emoji {
    font-size: 14.5px;
    line-height: 1;
    flex-shrink: 0;
}

/* Selector d'alumne/a: és el control principal d'aquesta pantalla, i abans
   quedava petit al costat de les pastilles. */
.eduscript-coop-alumne-wrap {
    max-width: 520px;
}

.eduscript-coop-alumne-wrap .eduscript-select {
    padding: 16px 44px 16px 18px;
    font-size: 16.5px;
    font-weight: 600;
}

.eduscript-coop-alumne-wrap .eduscript-select-arrow {
    width: 14px;
    height: 14px;
}

@media (max-width: 560px) {
    .eduscript-coop-mode .eduscript-segment__btn,
    .eduscript-coop-avaluacio .eduscript-segment__btn {
        min-height: 38px;
        padding: 0 11px;
        font-size: 13px;
    }
    .eduscript-coop-alumne-wrap .eduscript-select {
        font-size: 15.5px;
        padding: 14px 40px 14px 15px;
    }
}

/* ─── Recomanacions per a la família (eina cooperativa) ────────────────────
   Van en una caixa pròpia sota l'informe, amb el seu botó de generar i el seu
   desat: el tutor/a pot refer-les sense tocar l'informe, i a l'inrevés. */
.eduscript-coop-reco {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px dashed var(--es-border);
}

.eduscript-coop-reco__head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.eduscript-coop-reco__title {
    margin: 0;
    flex: 1;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--es-text);
}

.eduscript-coop-reco__btn {
    flex-direction: column;
    gap: 0;
    padding: 8px 14px;
    line-height: 1.25;
}

.eduscript-coop-reco__btn small {
    font-size: 10.5px;
    font-weight: 500;
    opacity: 0.75;
}

/* Text d'ajuda quan la caixa és buida (no es pot fer amb ::placeholder
   perquè és un contenteditable, no un camp de formulari). */
#eduscript-coop-reco:empty::before {
    content: attr(data-placeholder);
    color: var(--es-text-placeholder);
}

/* ─── Continguts treballats al quadern de la classe ────────────────────────
   La casella només té sentit si l'escola els fa servir (EduScript → Informe).
   La marca «--continguts» la posa el quadern segons la configuració. */
.eduscript-coop:not(.eduscript-app--continguts) .eduscript-area__continguts {
    display: none;
}

/* ─── PI (pla individualitzat) a la barra de l'àrea ────────────────────────
   Casella compacta al costat del nom de l'àrea. En marcar-la s'obre, just a
   sota de la barra, la frase que sortirà a l'informe (editable). La caixa va
   fora del cos plegable: així es pot escriure sense desplegar l'àrea. */
.eduscript-coop-pi {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding: 3px 8px;
    border: 1px solid var(--es-border);
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    background: var(--es-bg-card);
    transition: var(--es-transition);
}

.eduscript-coop-pi:hover {
    border-color: var(--es-primary);
}

.eduscript-coop-pi__txt {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--es-text-muted);
}

.eduscript-coop-pi__check {
    width: 13px;
    height: 13px;
    margin: 0;
    accent-color: var(--es-primary);
    cursor: pointer;
}

.eduscript-coop-pi__check:checked + .eduscript-coop-pi__txt {
    color: var(--es-primary);
}

.eduscript-coop-pi-box {
    padding: 8px 14px 0;
}

.eduscript-coop-pi-box[hidden] {
    display: none;
}

/* Frase d'una sola línia: cal desfer el «min-height: 130px» de les caixes de
   text grans (observacions, continguts), que aquí feia un forat enorme. */
.eduscript-coop-pi__text {
    width: 100%;
    min-height: 0;
    padding: 7px 12px;
    font-size: 13px;
    font-style: italic;
    line-height: 1.5;
    resize: none;
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════
   EL TEXT QUE SORTIRÀ A L'INFORME (mode «a partir de frases»)
   La casella de dalt de la valoració i, dins de cada àrea, el quadre amb
   el text que li surt segons les notes (o el que el mestre hi ha escrit).
   ═══════════════════════════════════════════════════════════════════ */

.eduscript-coop-veure-text {
    margin: -6px 0 16px;
}

.eduscript-coop-veure-text label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: var(--es-bg-input);
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-pill);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--es-text-secondary);
    cursor: pointer;
    transition: var(--es-transition);
}

.eduscript-coop-veure-text label:hover {
    border-color: var(--es-border-hover);
    color: var(--es-text);
}

.eduscript-coop-resultat {
    margin: 10px 14px 4px;
    background: var(--es-bg-input);
    border: 1px solid var(--es-border);
    border-left: 4px solid var(--es-primary);
    border-radius: var(--es-radius-sm);
}

.eduscript-coop-resultat[hidden] {
    display: none;
}

/* Text escrit a mà: es distingeix del generat d'una ullada. */
.eduscript-coop-resultat--pers {
    border-left-color: var(--es-success);
    background: var(--es-success-bg);
}

.eduscript-coop-resultat__cap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--es-border);
}

.eduscript-coop-resultat__etiqueta {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--es-text-muted);
    text-transform: uppercase;
}

.eduscript-coop-resultat__accions {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.eduscript-coop-resultat__accions button,
.eduscript-coop-resultat__botons button {
    padding: 4px 12px;
    background: var(--es-bg-card);
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-pill);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--es-text-secondary);
    cursor: pointer;
    transition: var(--es-transition);
}

.eduscript-coop-resultat__accions button:hover:not(:disabled),
.eduscript-coop-resultat__botons button:hover:not(:disabled) {
    border-color: var(--es-border-hover);
    color: var(--es-text);
}

.eduscript-coop-resultat__restaura {
    color: var(--es-error);
}

.eduscript-coop-resultat__restaura[hidden] {
    display: none;
}

.eduscript-coop-resultat__desa {
    background: var(--es-primary);
    border-color: var(--es-primary);
    color: #fff;
}

.eduscript-coop-resultat__desa:hover:not(:disabled) {
    background: var(--es-primary-dark);
    border-color: var(--es-primary-dark);
    color: #fff;
}

.eduscript-coop-resultat__text {
    padding: 12px;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--es-text);
}

.eduscript-coop-resultat__text em {
    color: var(--es-text-muted);
}

.eduscript-coop-resultat__edit {
    padding: 12px;
}

.eduscript-coop-resultat__edit[hidden],
.eduscript-coop-resultat__view[hidden] {
    display: none;
}

.eduscript-coop-resultat__area {
    width: 100%;
    min-height: 0;
    line-height: 1.6;
}

.eduscript-coop-resultat__ajuda {
    margin: 8px 0 0;
    font-size: 0.8125rem;
    color: var(--es-text-secondary);
    line-height: 1.5;
}

.eduscript-coop-resultat__botons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}

/* ═══════════════════════════════════════════════════════════════════
   TRIA DE CLASSE: Infantil i Primària amb codi de colors
   Les classes es reparteixen en dos blocs (com al butlletí de paper) i
   cada botó es pinta segons les notes que ja s'hi han posat. Només en
   tenen les que ja s'han començat: una classe intacta es queda neutra.
   ═══════════════════════════════════════════════════════════════════ */

.eduscript-coop-classes__llista {
    display: block;
}

.eduscript-coop-blocs {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
}

.eduscript-coop-bloc {
    flex: 1 1 300px;
    min-width: 0;
    padding: 16px 18px 18px;
    background: var(--es-bg-card);
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-lg, 14px);
    box-shadow: var(--es-shadow-sm);
}

/* Primària té el doble de cursos: se li dona el doble d'amplada perquè
   les dues graelles quedin amb els botons de mida semblant. */
.eduscript-coop-bloc--primaria {
    flex-grow: 2;
    flex-basis: 520px;
}

.eduscript-coop-bloc__titol {
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--es-border);
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    color: var(--es-text-secondary);
}

.eduscript-coop-bloc--infantil .eduscript-coop-bloc__titol {
    border-bottom-color: #e8a33d;
}

.eduscript-coop-bloc--primaria .eduscript-coop-bloc__titol {
    border-bottom-color: #4a90d9;
}

.eduscript-coop-bloc__grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.eduscript-coop-bloc--primaria .eduscript-coop-bloc__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 640px) {
    .eduscript-coop-bloc--primaria .eduscript-coop-bloc__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.eduscript-coop-classbtn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 13px 6px;
    font-family: var(--es-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    color: var(--es-text-secondary);
    background: var(--es-bg-input);
    border: 2px solid var(--es-border);
    border-radius: 10px;
    cursor: pointer;
    transition: var(--es-transition);
}

.eduscript-coop-classbtn:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: var(--es-primary);
    color: var(--es-primary-dark);
}

.eduscript-coop-classbtn__tutor {
    font-size: 10px;
    line-height: 1;
}

/* ─── Codi de colors: quantes notes hi ha posades ─── */
.eduscript-coop-classbtn--vermell {
    background: #fdecea;
    border-color: #e05c4b;
    color: #922b21;
}

.eduscript-coop-classbtn--taronja {
    background: #fdeacc;
    border-color: #e0801f;
    color: #a04000;
}

.eduscript-coop-classbtn--groc {
    background: #fef7c3;
    border-color: #d9b00c;
    color: #7d6608;
}

.eduscript-coop-classbtn--verd {
    background: #e6f7ee;
    border-color: #35b96e;
    color: #196f3d;
}

.eduscript-coop-classbtn--complet {
    background: #12a085;
    border-color: #0e6655;
    color: #fff;
    box-shadow: 0 2px 6px rgba(18, 160, 133, 0.32);
}

.eduscript-coop-classbtn--complet::after {
    content: '✓';
    font-weight: 700;
}

.eduscript-coop-classbtn--vermell:hover,
.eduscript-coop-classbtn--taronja:hover,
.eduscript-coop-classbtn--groc:hover,
.eduscript-coop-classbtn--verd:hover,
.eduscript-coop-classbtn--complet:hover {
    filter: brightness(0.96);
    border-color: currentColor;
    color: inherit;
}

/* Classes on el mestre no pot entrar: es veuen, però apagades. */
.eduscript-coop-classbtn--tancada,
.eduscript-coop-classbtn--tancada:hover {
    background: transparent;
    border-color: var(--es-border);
    border-style: dashed;
    color: var(--es-text-placeholder);
    font-weight: 500;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ─── Llegenda del codi de colors ─── */
.eduscript-coop-llegenda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin: 16px 0 0;
    font-size: 11.5px;
    color: var(--es-text-muted);
}

.eduscript-coop-llegenda__txt {
    font-weight: 600;
}

.eduscript-coop-llegenda__item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.eduscript-coop-llegenda__punt {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    border: 1.5px solid var(--es-border);
}

.eduscript-coop-llegenda__punt--vermell { background: #fdecea; border-color: #e05c4b; }
.eduscript-coop-llegenda__punt--taronja { background: #fdeacc; border-color: #e0801f; }
.eduscript-coop-llegenda__punt--groc    { background: #fef7c3; border-color: #d9b00c; }
.eduscript-coop-llegenda__punt--verd    { background: #e6f7ee; border-color: #35b96e; }
.eduscript-coop-llegenda__punt--complet { background: #12a085; border-color: #0e6655; }
.eduscript-coop-llegenda__punt--cap     { background: var(--es-bg-input); }

/* En fosc, els fons clars del codi de colors es tornen apagats perquè el
   text hi segueixi llegint-se: es conserva el to, no la lluminositat. */
.eduscript-app[data-theme="dark"] .eduscript-coop-classbtn--vermell { background: #3a1f1c; color: #f0a79c; }
.eduscript-app[data-theme="dark"] .eduscript-coop-classbtn--taronja { background: #3a2a14; color: #f0bf85; }
.eduscript-app[data-theme="dark"] .eduscript-coop-classbtn--groc    { background: #35300f; color: #e6d073; }
.eduscript-app[data-theme="dark"] .eduscript-coop-classbtn--verd    { background: #1b3325; color: #86d9a8; }
.eduscript-app[data-theme="dark"] .eduscript-coop-llegenda__punt--vermell { background: #3a1f1c; }
.eduscript-app[data-theme="dark"] .eduscript-coop-llegenda__punt--taronja { background: #3a2a14; }
.eduscript-app[data-theme="dark"] .eduscript-coop-llegenda__punt--groc    { background: #35300f; }
.eduscript-app[data-theme="dark"] .eduscript-coop-llegenda__punt--verd    { background: #1b3325; }

/* ─── Salutació al mestre, al mig de la capçalera ──────────────────────────
   Va entre el nom de l'escola i el botó de mode fosc. En pantalles estretes
   s'amaga: el nom del mestre també surt a la barra de la classe. */
.eduscript-coop-header__titles {
    flex: 0 1 auto;
}

.eduscript-coop-header__hola {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--es-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Porta de la consola, a la dreta de la salutació. Només la veuen
   l'administració del web i la coordinació de l'escola: la resta de mestres
   no hi tenen res a fer i el PHP ni tan sols els pinta l'enllaç. */
.eduscript-coop-header__consola {
    flex: 0 0 auto;
    white-space: nowrap;
    text-decoration: none;
}

@media (max-width: 900px) {
    .eduscript-coop-header__hola {
        font-size: 18px;
    }
}

@media (max-width: 640px) {
    .eduscript-coop-header__hola {
        display: none;
    }
}


/* ─── Àrees d'altres mestres (àrees repartides) ───────────────────────────
   L'administració pot repartir les àrees de la classe. La que no és teva es
   veu, però apagada: així saps que hi és i qui la porta, sense poder-hi
   escriure per equivocació. */

.eduscript-area--aliena {
    opacity: 0.72;
}

.eduscript-area--aliena .eduscript-area__body {
    background: var(--es-bg-input);
}

.eduscript-area-aliena__marca {
    flex: 0 0 auto;
    margin-left: auto;
    /* Només hi ha el cadenat: la píndola ha de quedar rodona, no un tub. */
    padding: 2px 7px;
    font-size: 0.6875rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--es-text-secondary);
    background: var(--es-bg-input);
    border: 1.5px solid var(--es-border);
    border-radius: var(--es-radius-pill);
}

.eduscript-coop-classcard--aliena {
    opacity: 0.7;
}

.eduscript-coop-aliena-avis {
    margin: 0 0 14px;
    padding: 10px 14px;
    font-size: 0.875rem;
    color: var(--es-text);
    background: var(--es-bg-input);
    border: 1.5px dashed var(--es-border);
    border-radius: var(--es-radius-md);
}

/* ─── Faltes i retards ────────────────────────────────────────────────────
   Full del tutor/a. El mode només surt al selector si l'escola en porta el
   compte (EduScript → Informe → «Faltes i retards»). */

.eduscript-coop-mode__faltes {
    display: none;
}

.eduscript-app--faltes .eduscript-coop-mode__faltes {
    display: flex;
}

/* Files més baixes que a la taula de notes: aquí només hi ha xifres i, amb
   vint-i-cinc alumnes, cada mil·límetre de més fa scroll. */
.eduscript-faltes tbody td {
    padding: 3px 8px;
}

.eduscript-faltes tbody .eduscript-taula__nom,
.eduscript-faltes tbody .eduscript-taula__num {
    padding-top: 3px;
    padding-bottom: 3px;
}

.eduscript-faltes tfoot td {
    padding: 6px 8px;
}

.eduscript-faltes__num {
    width: 74px;
    padding: 3px 8px;
    font-family: var(--es-font);
    font-size: 0.9375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--es-text);
    background: var(--es-bg-input);
    border: 1.5px solid var(--es-border);
    border-radius: var(--es-radius-sm);
    transition: var(--es-transition);
}

.eduscript-faltes__num:hover {
    border-color: var(--es-border-hover);
}

.eduscript-faltes__num:focus {
    outline: none;
    border-color: var(--es-border-focus);
    box-shadow: var(--es-shadow-focus);
}

.eduscript-faltes__num:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Els totals de baix, en xifres i no en pastilles de nota */
.eduscript-faltes tfoot td {
    font-variant-numeric: tabular-nums;
    font-size: 0.9375rem;
}

/* ─── Catàleg del centre ──────────────────────────────────────────────────
   Biblioteca d'ítems i frases comuna a tot el web. S'obre des de la fila
   d'afegir ítems de cada àrea, en una finestra emergent ampla amb cercador i
   filtres de curs i d'àrea. */

/* El botó viu a la fila d'afegir ítems, i només té sentit quan l'informe es
   compon amb frases (i, a l'eina individual, amb la sessió iniciada). */
.eduscript-cataleg__btn {
    display: none;
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
    /* Ben separat del «+», que és una acció diferent i no s'han de confondre. */
    margin-left: 18px;
}

.eduscript-app--frases.eduscript-app--cataleg .eduscript-cataleg__btn {
    display: inline-flex;
}

/* ─── La finestra ─── */

.eduscript-cataleg-modal {
    max-width: 900px;
    max-height: calc(100vh - 40px);
    gap: 12px;
    overflow: hidden; /* qui es desplaça és la llista de resultats */
}

.eduscript-cataleg__filtres {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.eduscript-cataleg__cerca {
    flex: 1 1 260px;
    min-width: 0;
    padding: 8px 12px;
    font-family: var(--es-font);
    font-size: 0.875rem;
    color: var(--es-text);
    background: var(--es-bg-input);
    border: 1.5px solid var(--es-border);
    border-radius: var(--es-radius-sm);
}

.eduscript-cataleg__cerca:focus {
    outline: none;
    border-color: var(--es-border-focus);
    box-shadow: var(--es-shadow-focus);
}

/* Els desplegables no s'encongeixen. Qui posiciona la fletxa és el
   contenidor, i el select té min-width propi: si el contenidor s'encongís
   per sota d'aquest mínim, la fletxa quedaria damunt del text. Si la fila no
   hi cap, que passi a la línia de sota —ja hi ha flex-wrap. */
.eduscript-cataleg__filtres .eduscript-select-wrap {
    flex: 0 0 auto;
    max-width: 100%;
}

.eduscript-cataleg__area {
    max-width: 260px;
}

/* ─── Els resultats ─── */

.eduscript-cataleg__llista {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 160px;
    overflow-y: auto;
    padding-right: 4px;
}

.eduscript-cataleg__buit {
    margin: 0;
    padding: 18px 4px;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--es-text-muted);
}

.eduscript-cataleg__fitxa {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: var(--es-bg-card);
    border: 1.5px solid var(--es-border);
    border-radius: var(--es-radius-sm);
    cursor: pointer;
    transition: var(--es-transition);
}

.eduscript-cataleg__fitxa:hover {
    border-color: var(--es-border-hover);
}

.eduscript-cataleg__fitxa--ja {
    opacity: 0.6;
    cursor: default;
}

.eduscript-cataleg__cos {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    min-width: 0;
}

.eduscript-cataleg__item {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--es-text);
}

/* Pastilles dels resultats. Compte: la del curs es deia
   «eduscript-cataleg__curs», igual que el DESPLEGABLE del filtre de dalt, i
   li encolomava aquest padding petit i la forma de pastilla: el text del
   select acabava sota la fletxa. Per això ara es diu «__curs-marca», com la
   de l'àrea que té al costat. */
.eduscript-cataleg__curs-marca,
.eduscript-cataleg__area-marca,
.eduscript-cataleg__ja,
.eduscript-cataleg__sensefrases {
    padding: 1px 8px;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--es-text-muted);
    background: var(--es-bg-input);
    border-radius: var(--es-radius-pill);
}

.eduscript-cataleg__ja {
    color: var(--es-success);
    background: var(--es-success-bg);
}

.eduscript-cataleg__frases {
    flex: 1 1 100%;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.eduscript-cataleg__frases li {
    display: flex;
    gap: 8px;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--es-text-secondary);
}

.eduscript-cataleg__frases li span {
    flex: 0 0 26px;
    font-weight: 700;
    color: var(--es-text-muted);
}

/* ─── El peu ─── */

.eduscript-cataleg__peu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--es-border);
}

.eduscript-cataleg__tots {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    color: var(--es-text-secondary);
    cursor: pointer;
}

.eduscript-cataleg__comptador {
    margin-right: auto;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--es-text-muted);
    font-variant-numeric: tabular-nums;
}

/* Els botons de l'eina són d'amplada sencera (el de generar l'informe); aquí
   han de fer només el que ocupen. */
.eduscript-cataleg__peu .eduscript-btn {
    flex: 0 0 auto;
    width: auto;
}

.eduscript-cataleg__peu .eduscript-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

@media (max-width: 640px) {
    .eduscript-cataleg__filtres .eduscript-select-wrap,
    .eduscript-cataleg__area {
        flex: 1 1 100%;
        max-width: none;
    }
    .eduscript-cataleg__comptador {
        margin-right: 0;
    }
    .eduscript-cataleg__peu .eduscript-btn {
        flex: 1 1 auto;
    }
}

/* ─── Botons de generar (l'individual) ────────────────────────────────────
   En mode IA n'hi ha un; en mode «a partir de frases», dos: l'informe sol
   (gratuït) i l'informe amb les recomanacions, que les redacta la IA. */

.eduscript-submit-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.eduscript-submit-row .eduscript-btn {
    flex: 1 1 240px;
}

#eduscript-submit-reco {
    display: none;
}

.eduscript-app--frases #eduscript-submit-reco {
    display: flex;
}

/* El mateix a l'eina d'escoles, però allà el segon botó demana que l'escola
   tingui les recomanacions posades i que qui miri sigui el tutor/a. */
#eduscript-coop-generate-reco {
    display: none;
}

.eduscript-app--frases.eduscript-app--reco #eduscript-coop-generate-reco {
    display: flex;
}

/* Amb els dos botons, el commutador de recomanacions ja no decideix res: qui
   ho fa és el botó que es clica. Les opcions (veu, gènere, títol) sí que hi
   són, perquè configuren com les escriu la IA. */
.eduscript-app--frases .eduscript-field--reco > .eduscript-toggle {
    display: none;
}

/* ─── Barra de consum dels crèdits (Configuració, escoles) ──────────────── */

/* El bloc del saldo va sol, a tota l'amplada i abans dels altres dos. */
.eduscript-coop-config-block--sol .eduscript-barra {
    height: 12px;
}

.eduscript-barra {
    height: 10px;
    margin: 4px 0 8px;
    overflow: hidden;
    background: var(--es-bg-input);
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-pill);
}

.eduscript-barra__omplert {
    height: 100%;
    width: 0;
    background: var(--es-primary);
    border-radius: var(--es-radius-pill);
    transition: width 0.35s ease;
}

/* A partir del 80% gastat, l'avís es veu de lluny. */
.eduscript-barra--alerta .eduscript-barra__omplert {
    background: var(--es-error);
}

.eduscript-barra__peu {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--es-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════
   FITXA DE CURS D'UN ALUMNE/A
   Finestra que s'obre des de la Taula clicant un nom: totes les
   avaluacions d'un mateix alumne/a en una pantalla.
   ═══════════════════════════════════════════════════════════════════════ */

/* El nom, a la Taula, és el botó que obre la fitxa. */
.eduscript-fitxa-obre {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    border-bottom: 1px dashed var(--es-border-hover);
    transition: var(--es-transition);
}

.eduscript-fitxa-obre:hover,
.eduscript-fitxa-obre:focus-visible {
    color: var(--es-primary);
    border-bottom-color: var(--es-primary);
}

/* Barra de dalt: tornar a la taula i passar d'un alumne/a a un altre. */
.eduscript-fitxa__barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 4px;
}

.eduscript-fitxa__barra-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.eduscript-fitxa__titols {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.eduscript-fitxa__sub {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--es-text-muted);
}

.eduscript-fitxa__cos {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 4px;
}

.eduscript-fitxa__bloc {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.eduscript-fitxa__titol {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--es-text);
}

.eduscript-fitxa__titol-sub {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--es-text-muted);
}

.eduscript-fitxa__cap {
    margin: 0;
    font-size: 0.8375rem;
    color: var(--es-text-muted);
}

/* ─── Què ha canviat ─────────────────────────────────────────────── */

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

.eduscript-fitxa__canvi {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-pill);
    background: var(--es-bg-card);
    font-size: 0.8125rem;
}

.eduscript-fitxa__canvi--puja { border-color: #a7d3a3; background: var(--es-success-bg); }
.eduscript-fitxa__canvi--baixa { border-color: #e2b0ac; background: var(--es-error-bg); }

.eduscript-app[data-theme="dark"] .eduscript-fitxa__canvi--puja {
    background: rgba(92, 138, 88, 0.16);
    border-color: rgba(92, 138, 88, 0.45);
}

.eduscript-app[data-theme="dark"] .eduscript-fitxa__canvi--baixa {
    background: rgba(196, 85, 77, 0.16);
    border-color: rgba(196, 85, 77, 0.45);
}

.eduscript-fitxa__fletxa {
    font-weight: 700;
    line-height: 1;
}

.eduscript-fitxa__canvi--puja .eduscript-fitxa__fletxa { color: var(--es-success); }
.eduscript-fitxa__canvi--baixa .eduscript-fitxa__fletxa { color: var(--es-error); }

.eduscript-fitxa__canvi-area {
    font-weight: 600;
    color: var(--es-text);
}

.eduscript-fitxa__canvi-notes {
    color: var(--es-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ─── La graella d'àrees ─────────────────────────────────────────── */

/* A la fitxa no hi ha columna de número: la primera columna és el nom de
   l'àrea i s'enganxa a l'esquerra del tot. */
.eduscript-fitxa__taula td.eduscript-taula__nom,
.eduscript-fitxa__taula th.eduscript-taula__nom {
    left: 0;
    max-width: 260px;
    white-space: normal;
}

.eduscript-fitxa__area {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.eduscript-fitxa__area:hover { color: var(--es-primary); }

.eduscript-fitxa__caret {
    flex: 0 0 auto;
    color: var(--es-text-muted);
    transition: transform 0.15s ease;
}

.eduscript-fitxa__area--obert .eduscript-fitxa__caret {
    transform: rotate(90deg);
    color: var(--es-primary);
}

.eduscript-fitxa__detall[hidden] { display: none; }

.eduscript-fitxa__detall > td {
    padding: 12px 14px 14px;
    text-align: left;
    background: var(--es-bg);
    border-bottom: 1.5px solid var(--es-border);
}

.eduscript-app[data-theme="dark"] .eduscript-fitxa__detall > td {
    background: rgba(255, 255, 255, 0.025);
}

.eduscript-fitxa__items {
    font-size: 0.8125rem;
}

/* Trimestre en què l'ítem no es treballava: ratllat i apagat, per no
   confondre'l amb un ítem que hi era i s'ha quedat sense valorar. */
.eduscript-fitxa__items td.eduscript-fitxa__nohi {
    color: var(--es-text-muted);
    opacity: 0.5;
    background-image: repeating-linear-gradient(
        135deg,
        transparent 0 5px,
        var(--es-border) 5px 6px
    );
}

.eduscript-fitxa__nohi-mostra {
    display: inline-block;
    width: 22px;
    text-align: center;
    color: var(--es-text-muted);
    border-radius: 4px;
    background-image: repeating-linear-gradient(
        135deg,
        transparent 0 5px,
        var(--es-border) 5px 6px
    );
}

.eduscript-fitxa__llegenda {
    margin-top: 8px;
    line-height: 1.5;
}

.eduscript-fitxa__items th.eduscript-fitxa__item,
.eduscript-fitxa__items td.eduscript-fitxa__item {
    width: auto;
    text-align: left;
    font-weight: 500;
    color: var(--es-text-secondary);
    white-space: normal;
}

/* ─── Observacions dels mestres ──────────────────────────────────── */

.eduscript-fitxa__obses {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.eduscript-fitxa__obs {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 10px;
    padding: 8px 12px;
    border-left: 3px solid var(--es-border-hover);
    border-radius: 0 var(--es-radius-sm) var(--es-radius-sm) 0;
    background: var(--es-bg-card);
    font-size: 0.8375rem;
}

.eduscript-fitxa__obs-av {
    font-weight: 700;
    color: var(--es-primary);
    white-space: nowrap;
}

.eduscript-fitxa__obs-txt {
    color: var(--es-text);
    line-height: 1.55;
    white-space: pre-wrap;
}

.eduscript-fitxa__obs-qui {
    grid-column: 2;
    font-size: 0.75rem;
    color: var(--es-text-muted);
}

.eduscript-fitxa__pi {
    margin: 12px 0 0;
    font-size: 0.8125rem;
    color: var(--es-text-secondary);
}

.eduscript-fitxa__num {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* ─── Informes desats ────────────────────────────────────────────── */

.eduscript-fitxa__informe {
    border: 1.5px solid var(--es-border);
    border-radius: var(--es-radius-md);
    background: var(--es-bg-card);
    overflow: hidden;
}

.eduscript-fitxa__informe + .eduscript-fitxa__informe { margin-top: 8px; }

.eduscript-fitxa__informe-cap {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    list-style: none;
    background: var(--es-bg-input);
}

.eduscript-fitxa__informe-cap::-webkit-details-marker { display: none; }

.eduscript-fitxa__informe-av {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--es-text);
}

.eduscript-fitxa__informe-quan {
    font-size: 0.75rem;
    color: var(--es-text-muted);
}

.eduscript-fitxa__informe-txt,
.eduscript-fitxa__informe-reco {
    padding: 12px 14px;
    font-size: 0.8625rem;
    line-height: 1.65;
    color: var(--es-text);
    white-space: pre-wrap;
}

.eduscript-fitxa__informe-reco {
    border-top: 1px solid var(--es-border);
}

.eduscript-fitxa__informe-reco strong {
    display: block;
    margin-bottom: 6px;
    font-size: 0.8125rem;
    color: var(--es-text-secondary);
}

.eduscript-fitxa__pos {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--es-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .eduscript-fitxa__taula td.eduscript-taula__nom,
    .eduscript-fitxa__taula th.eduscript-taula__nom {
        max-width: 150px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   ÀREES QUE ENTREN A L'INFORME (panell del tutor/a)
   Plegat i en lletra petita: el cas normal és que hi entrin totes i que
   ningú no hagi d'obrir-ho mai.
   ═══════════════════════════════════════════════════════════════════════ */

.eduscript-coop-arees {
    margin-top: 10px;
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-sm);
    background: var(--es-bg);
    font-size: 0.8125rem;
}

.eduscript-coop-arees__summary {
    padding: 7px 12px;
    color: var(--es-text-secondary);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: var(--es-transition);
}

.eduscript-coop-arees__summary::-webkit-details-marker { display: none; }

.eduscript-coop-arees__summary::before {
    content: '▸';
    display: inline-block;
    margin-right: 6px;
    color: var(--es-text-muted);
    transition: transform 0.15s ease;
}

.eduscript-coop-arees[open] .eduscript-coop-arees__summary::before {
    transform: rotate(90deg);
}

.eduscript-coop-arees__summary:hover { color: var(--es-primary); }

.eduscript-coop-arees[open] .eduscript-coop-arees__summary {
    border-bottom: 1px solid var(--es-border);
}

/* Quan se n'ha tret alguna, que es vegi sense haver d'obrir-ho. */
.eduscript-coop-arees--retallat {
    border-color: var(--es-primary);
}

.eduscript-coop-arees--retallat .eduscript-coop-arees__summary {
    color: var(--es-primary);
}

.eduscript-coop-arees__body {
    padding: 10px 12px 12px;
}

.eduscript-coop-arees__hint {
    margin: 0 0 8px;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--es-text-muted);
}

.eduscript-coop-arees__llista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 2px 10px;
}

.eduscript-coop-arees__item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 6px;
    border-radius: var(--es-radius-sm);
    color: var(--es-text-secondary);
    cursor: pointer;
    transition: var(--es-transition);
}

.eduscript-coop-arees__item:hover { background: var(--es-bg-hover); }

.eduscript-coop-arees__item input { margin: 0; flex: 0 0 auto; }

/* L'àrea desmarcada s'apaga: d'un cop d'ull es veu què no hi entrarà. */
.eduscript-coop-arees__item:has(input:not(:checked)) span {
    color: var(--es-text-muted);
    text-decoration: line-through;
}

.eduscript-coop-arees__totes {
    margin-top: 8px;
    padding: 4px 12px;
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-pill);
    background: var(--es-bg-card);
    color: var(--es-text-secondary);
    font-family: var(--es-font);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--es-transition);
}

.eduscript-coop-arees__totes:hover {
    border-color: var(--es-primary);
    color: var(--es-primary);
}