/**
 * 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 d'opcions: pot tenir 4 camps (Tipus, To, Avaluació, Mode); que baixin
   de línia si no hi caben en comptes d'aixafar-se. */
.eduscript-field-row--options {
    flex-wrap: wrap;
}

/* Fila d'opcions: tots els segments amb la mateixa alçada */
.eduscript-field-row--options .eduscript-field--half {
    display: flex;
    flex-direction: column;
    flex: 1 1 210px;
}

.eduscript-field-row--options .eduscript-segment {
    flex: 1;
}

/* L'avaluació (1a/2a/3a) no necessita amplada: la cenyim al contingut perquè
   els camps de Tipus i To d'informe guanyin espai (i el subtítol de «Curt»
   càpiga en una sola línia). */
.eduscript-field-row--options .eduscript-field--avaluacio {
    flex: 0 0 auto;
}

/* El To d'informe (Formal/Informal) té subtítols curts: que es cenyeixi al
   contingut i no creixi, així Tipus d'informe («Curt») i Mode («Especialista»)
   guanyen amplada per als seus subtítols. */
.eduscript-field-row--options .eduscript-field--to {
    flex: 0 1 auto;
}

.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;
    color: var(--es-text-secondary);
    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-muted);
    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 180px;
    min-width: 140px;
    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) */
.eduscript-template-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.eduscript-template-action {
    padding: 11px 18px;
}

.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);
}

/* Indicador de plantilla activa (desat automàtic) */
.eduscript-template-status {
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: var(--es-radius-md);
    background: var(--es-primary-subtle);
    border: 1px solid var(--es-primary-light);
    font-size: 13px;
    color: var(--es-text);
}

.eduscript-template-status__dot {
    display: inline-block;
    margin-right: 4px;
    color: var(--es-primary);
    font-weight: 700;
}

.eduscript-template-status strong {
    color: var(--es-primary-dark);
}

/* 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 {
    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;
    padding: 7px 0 4px;
    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;
}

/* ─── Plegable «Opcions de l'informe» (format + recomanacions) ─── */
.eduscript-options {
    margin-bottom: 4px;
    background: var(--es-bg-input);
    border: 1.5px solid var(--es-border);
    border-radius: var(--es-radius-md);
}

.eduscript-options__summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--es-text);
}

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

.eduscript-options__icon {
    flex-shrink: 0;
    color: var(--es-primary);
}

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

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

.eduscript-options[open] .eduscript-options__chevron {
    transform: rotate(180deg);
}

.eduscript-options__body {
    padding: 4px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: eduscript-fadeIn 0.2s ease;
}

/* Dins del plegable, els camps no necessiten marge propi extra */
.eduscript-options__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 del plegable, per no ocupar tant */
.eduscript-options__body .eduscript-toggle {
    padding: 10px 12px;
}

.eduscript-options__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;
    text-align: center;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 2px rgba(61, 57, 41, 0.25);
}

.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: 15px;
    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 ─── */
.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 ─── */
.eduscript-coop-alumnat-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 12px 14px;
    background: var(--es-bg-input);
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-md);
    margin-bottom: 8px;
}

.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__progres {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--es-text-muted);
    white-space: nowrap;
}

.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;
    padding: 7px 30px 7px 11px;
    font-size: 13.5px;
}

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

@media (max-width: 600px) {
    .eduscript-coop-avbar__titol {
        font-size: 15px;
    }

    .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: 13px;
    }

    .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--options {
        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 */
.eduscript-coop-avaluacio {
    margin-left: auto;
}

/* Les pastilles («1a av.», «2a av.», «3a av.») 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 «2a av.» es trenqués). */
.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);
}

/* ─── 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 comptador de crèdits només té sentit si s'activen les recomanacions
   (l'informe per frases, tot sol, no en gasta cap). */
.eduscript-app--frases:not(.eduscript-app--reco) .eduscript-credits {
    display: none;
}

/* 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);
}

/* 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);
}

/* 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;
}

/* ═══════════════════════════════════════════════════════════════════
   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: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--es-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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