/* ==========================================================================
   Design system de l'aula — preparacioACTIC.cat
   Carregat NOMÉS si la plataforma té esTemaDs=1 (vegeu index.php).
   Tokens fixos (marca/DigComp/neutres/ombres/easing) + classes utilitàries.
   El color de marca i les fonts es poden sobreescriure des de la config de
   l'aula via un :root inline a index.php.
   Tota la capa visual es scopa sota body[data-tema] per no afectar res si,
   per error, el full es carregués en una aula sense tema.
   ========================================================================== */

:root {
    /* Marca */
    --preparacio-orange: #FF9600;
    --preparacio-orange-deep: #D9720B;
    --preparacio-orange-soft: #FFE3BD;
    --preparacio-orange-tint: #FFF5E5;
    --spin-blue: #239ECC;
    --spin-blue-deep: #1B7FA3;
    --spin-blue-soft: #C9EAF6;
    --spin-blue-tint: #EEF8FC;

    /* Àrees DigComp 3.0 (base / deep / tint) */
    --digcomp-a1: #F7CB56; --digcomp-a1-deep: #B8902A; --digcomp-a1-tint: #FEF6E0;
    --digcomp-a2: #5A8DC8; --digcomp-a2-deep: #2E5E96; --digcomp-a2-tint: #E5EEF8;
    --digcomp-a3: #EB9D41; --digcomp-a3-deep: #B86A14; --digcomp-a3-tint: #FCEAD0;
    --digcomp-a4: #5D9E52; --digcomp-a4-deep: #3D7232; --digcomp-a4-tint: #E4F0E1;
    --digcomp-a5: #E37769; --digcomp-a5-deep: #B14638; --digcomp-a5-tint: #FAE3DF;

    /* Neutres */
    --ink: #1A1A1A;
    --slate-700: #4A4A4A;
    --slate-500: #767676;
    --slate-300: #D1D1D1;
    --slate-200: #E4E4E4;
    --slate-100: #F1F1F1;
    --paper: #FAFAF9;
    --white: #FFFFFF;

    /* Semàntics */
    --fg-1: var(--ink);
    --fg-2: var(--slate-700);
    --fg-3: var(--slate-500);
    --fg-mute: var(--slate-500);
    --bg-1: var(--white);
    --bg-2: var(--paper);
    --bg-3: var(--slate-100);
    --border-1: var(--slate-200);
    --border-2: var(--slate-300);

    /* Estat */
    --state-success: #2E9B5E;
    --state-warning: #E1A40D;
    --state-danger: #C3382E;
    --state-info: var(--spin-blue);

    /* Tipografia (fallbacks; es poden sobreescriure des de la config) */
    --font-display: 'Jura', system-ui, sans-serif;
    --font-body: 'Nunito Sans', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;

    /* Radii / ombres / motion */
    --radius-1: 4px; --radius-2: 6px; --radius-3: 10px; --radius-4: 16px; --radius-pill: 999px;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 12px rgba(0, 0, 0, .06);
    --shadow-2: 0 4px 16px rgba(0, 0, 0, .08);
    --shadow-3: 0 12px 32px rgba(0, 0, 0, .12);
    --shadow-card-hover: 0 10px 28px rgba(35, 158, 204, .18);
    --easing-standard: cubic-bezier(.2, .8, .2, 1);
}

/* Mode fosc (s'activa amb [data-theme="dark"] al body) */
body[data-tema][data-theme="dark"] {
    --ink: #F1F1F1;
    --fg-1: #F1F1F1;
    --fg-2: #C9C9C9;
    --fg-3: #9A9A9A;
    --bg-1: #1C1C1E;
    --bg-2: #161618;
    --bg-3: #232326;
    --border-1: #34343A;
    --border-2: #44444C;
    --paper: #161618;
    --white: #1C1C1E;
}

/* ----- Base ----- */
body[data-tema] {
    font-family: var(--font-body);
    color: var(--fg-1);
    background: var(--bg-2);
}

body[data-tema] h1, body[data-tema] h2, body[data-tema] h3,
body[data-tema] h4, body[data-tema] h5, body[data-tema] h6 {
    font-family: var(--font-display);
    color: var(--ink);
    letter-spacing: -.01em;
}

/* ----- Classes utilitàries del DS ----- */
body[data-tema] .display {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -.02em;
    color: var(--ink);
}

body[data-tema] .eyebrow {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--preparacio-orange-deep);
}

body[data-tema] .lead {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.55;
    color: var(--fg-2);
}

body[data-tema] .meta {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--fg-3);
}

body[data-tema] .card {
    background: var(--bg-1);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-4);
    box-shadow: var(--shadow-1);
}

body[data-tema] .card-hover {
    transition: transform 200ms var(--easing-standard), box-shadow 200ms var(--easing-standard);
}

body[data-tema] .card-hover:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
}

/* ----- Marca aplicada sobre Bootstrap (scopat) ----- */
body[data-tema] a {
    color: var(--preparacio-orange-deep);
}

body[data-tema] a:hover {
    color: var(--preparacio-orange);
}

body[data-tema] .btn-primary,
body[data-tema] a.btn-primary,
body[data-tema] button.btn-primary {
    background-color: var(--preparacio-orange);
    border-color: var(--preparacio-orange);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 600;
}

body[data-tema] .btn-primary:hover,
body[data-tema] a.btn-primary:hover,
body[data-tema] button.btn-primary:hover,
body[data-tema] .btn-primary:focus,
body[data-tema] .btn-primary:active {
    background-color: var(--preparacio-orange-deep);
    border-color: var(--preparacio-orange-deep);
    color: #fff;
}

body[data-tema] .btn-ghost {
    background: transparent;
    border: 1.5px solid var(--border-2);
    color: var(--fg-1);
    font-family: var(--font-display);
    font-weight: 600;
    border-radius: var(--radius-2);
}

body[data-tema] .btn-ghost:hover {
    border-color: var(--preparacio-orange);
    color: var(--preparacio-orange-deep);
}

body[data-tema] .nav-pills .nav-link.active,
body[data-tema] .nav-pills .show > .nav-link {
    background-color: var(--preparacio-orange);
}

body[data-tema] .nav-link {
    color: var(--preparacio-orange-deep);
}

body[data-tema] .nav-link:hover {
    color: var(--preparacio-orange);
}

body[data-tema] .badge-warning {
    background-color: var(--preparacio-orange);
    color: #fff;
}

/* ==========================================================================
   Header públic (reskin sobre la navbar Bootstrap)
   ========================================================================== */
body[data-tema] .fluidcontainer.bg-dark {
    background: rgba(255, 255, 255, .94) !important;
    border-bottom: 1px solid var(--border-1);
    backdrop-filter: saturate(150%) blur(6px);
    position: sticky;
    top: 0;
    z-index: 1030;
}

body[data-tema] .navbar.bg-dark {
    background: transparent !important;
    min-height: 70px;
}

body[data-tema] .navbar-dark .navbar-nav .nav-link,
body[data-tema] .navbar .menuSuperior {
    color: var(--fg-1) !important;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
}

body[data-tema] .navbar-dark .navbar-nav .nav-link:hover,
body[data-tema] .navbar .nav-item.active .menuSuperior {
    color: var(--preparacio-orange-deep) !important;
}

body[data-tema] .navbar-brand-text {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 23px;
    letter-spacing: -.03em;
    line-height: 1;
    white-space: nowrap;
}

body[data-tema] .navbar-brand-text .b-orange { color: var(--preparacio-orange); }
body[data-tema] .navbar-brand-text .b-ink { color: var(--ink); }

/* Logo propi de l'aula (wordmark real): alçada fidel al handoff (~28px). El
   max-width evita que un wordmark molt apaïsat surti de la barra en pantalles
   estretes (el de preparacioACTIC és 4077x433). */
body[data-tema] .navbar-brand > img { max-width: 100%; max-height: 28px; width: auto; height: auto; }

body[data-tema] .navbar .btn-outline-light {
    color: var(--fg-1);
    border-color: var(--border-2);
}

body[data-tema] .navbar .btn-outline-light:hover {
    background: var(--preparacio-orange);
    border-color: var(--preparacio-orange);
    color: #fff;
}

/* ----- Bloc de sessió iniciada (botó cap a l'aula + usuari) ----- */
body[data-tema] .pa-nav-user {
    display: flex;
    align-items: center;
    gap: 14px;
}

body[data-tema] .pa-nav-user__sep {
    width: 1px;
    height: 26px;
    background: var(--border-1);
    flex-shrink: 0;
}

/* El bloc sencer és l'enllaç al compte: sense vora ni subratllat, i el color del
   text el manen les dues línies (la regla global `a`/`a:hover` el tenyiria de taronja). */
body[data-tema] .pa-nav-user__link,
body[data-tema] .pa-nav-user__link:hover,
body[data-tema] .pa-nav-user__link:focus {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 0;
    color: inherit;
    text-decoration: none;
}

body[data-tema] .pa-nav-user__avatar {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--spin-blue);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Amb foto de perfil el cercle és la imatge (el PHP hi deixa el text buit). */
body[data-tema] .pa-nav-user__avatar--foto {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

body[data-tema] .pa-nav-user__txt {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

body[data-tema] .pa-nav-user__nom {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    color: var(--fg-1);
}

body[data-tema] .pa-nav-user__niv {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--fg-3);
}

body[data-tema] .pa-nav-user .btn-primary:focus-visible,
body[data-tema] .pa-nav-user__link:focus-visible {
    outline: 2px solid var(--spin-blue);
    outline-offset: 2px;
}

/* Xebró del desplegable d'usuari: la marca que diu que el bloc s'obre. */
body[data-tema] .pa-nav-user__cev {
    font-size: 11px;
    color: var(--slate-500);
    margin-left: 2px;
    flex-shrink: 0;
}

/* Menú del bloc d'usuari (compte + tancar la sessió).
   ⚠️ Superfície CLARA fixa, i no els semàntics `--bg-1`/`--fg-1`: la capçalera pública
   és clara SEMPRE —`.fluidcontainer.bg-dark`, més amunt, la pinta amb un blanc literal
   i `!important`, també amb el mode fosc de l'aula (`esModeFosc`)—, o sigui que un menú
   que sí que girés a fosc penjaria d'una barra blanca. Els neutres `--slate-*` valen
   perquè el bloc `[data-theme="dark"]` no els redefineix; els semàntics sí. */
body[data-tema] .pa-nav-user__menu {
    margin-top: 10px;
    min-width: 210px;
    padding: 6px;
    background: #FFFFFF;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-3);
    box-shadow: var(--shadow-2);
}

body[data-tema] .pa-nav-user__menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-2);
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--slate-700);
}

body[data-tema] .pa-nav-user__menu .dropdown-item i {
    color: var(--slate-500);
}

body[data-tema] .pa-nav-user__menu .dropdown-item:hover,
body[data-tema] .pa-nav-user__menu .dropdown-item:focus {
    background: var(--slate-100);
    color: var(--slate-700);
}

body[data-tema] .pa-nav-user__menu .dropdown-divider {
    margin: 6px 4px;
    border-top-color: var(--slate-200);
}

body[data-tema] .navbar-dark .navbar-toggler {
    border-color: var(--border-2);
}

body[data-tema] .navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='%231A1A1A' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ==========================================================================
   Seccions de la portada (design system)
   ========================================================================== */
body[data-tema] #lms.container-lg {
    max-width: 100%;
    padding: 0;
}

body[data-tema] .pa-section {
    padding: 84px 0;
    border-bottom: 1px solid var(--border-1);
}

body[data-tema] .pa-wrap {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

body[data-tema] .pa-section h2 {
    font-size: 38px;
    margin: 8px 0 12px;
    letter-spacing: -.01em;
}

body[data-tema] .pa-head {
    max-width: 660px;
    margin: 0 0 40px;
}

body[data-tema] .pa-head.center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* ----- Hero ----- */
body[data-tema] .pa-hero {
    background: linear-gradient(180deg, var(--white) 0%, var(--bg-2) 100%);
    padding: 72px 0 64px;
    overflow: hidden;
}

body[data-tema] .pa-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: center;
}

body[data-tema] .pa-hero h1 {
    font-size: 58px;
    line-height: 1.02;
    letter-spacing: -.02em;
    margin: 0 0 18px;
}

/* Targetes flotants animades del hero (decoratives, àrees DigComp) */
body[data-tema] .pa-hero-art {
    position: relative;
    height: 478px;
}

body[data-tema] .pa-hero-art .drift {
    position: absolute;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--spin-blue-soft) 0%, transparent 70%);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: .5;
    animation: pa-drift 9s ease-in-out infinite;
}

body[data-tema] .pa-card-float {
    width: 216px;
    height: 146px;
    border-radius: 18px;
    padding: 17px 18px;
    background: var(--band);
    color: var(--bink);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .16), 0 4px 10px rgba(0, 0, 0, .08);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    animation: pa-floaty 6s ease-in-out infinite;
}

@keyframes pa-floaty {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-13px); }
}

@keyframes pa-drift {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(calc(-50% + 18px), calc(-50% - 14px)) scale(1.06); }
}

body[data-tema] .pa-stats {
    display: flex;
    gap: 26px;
    margin-top: 34px;
    flex-wrap: wrap;
}

body[data-tema] .pa-stat {
    padding-left: 16px;
    border-left: 2px solid var(--border-1);
}

body[data-tema] .pa-stat .n {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 26px;
    color: var(--ink);
    line-height: 1;
}

body[data-tema] .pa-stat .l {
    font-size: 12px;
    color: var(--fg-3);
    margin-top: 4px;
}

body[data-tema] .pa-hero .card-body-inicia-sessio,
body[data-tema] #login.card {
    border-radius: var(--radius-4);
    box-shadow: var(--shadow-2);
}

/* ----- Passos / graella genèrica de targetes ----- */
body[data-tema] .pa-grid {
    display: grid;
    gap: 18px;
}

body[data-tema] .pa-grid-4 { grid-template-columns: repeat(4, 1fr); }
body[data-tema] .pa-grid-3 { grid-template-columns: repeat(3, 1fr); }
body[data-tema] .pa-grid-2 { grid-template-columns: repeat(2, 1fr); }

body[data-tema] .pa-card {
    background: var(--bg-1);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-4);
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body[data-tema] .pa-card .pa-ico {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: var(--preparacio-orange-tint);
    color: var(--preparacio-orange-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

body[data-tema] .pa-card h4 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16.5px;
    margin: 2px 0 0;
    color: var(--ink);
}

body[data-tema] .pa-card p {
    font-size: 13.5px;
    color: var(--fg-2);
    line-height: 1.55;
    margin: 0;
}

body[data-tema] .pa-num {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--fg-mute);
    font-weight: 600;
}

body[data-tema] .pa-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

body[data-tema] .pa-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-1);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-pill);
    padding: 6px 12px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--fg-1);
}

body[data-tema] .pa-tag i { color: var(--preparacio-orange-deep); }

/* ----- Àrees DigComp (tabs) ----- */
body[data-tema] .pa-area-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

body[data-tema] .pa-area-tab {
    --band: var(--digcomp-a1);
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13.5px;
    padding: 10px 16px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: all 160ms var(--easing-standard);
    border: 1.5px solid var(--border-2);
    background: var(--bg-1);
    color: var(--fg-1);
}

body[data-tema] .pa-area-tab .dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--band);
}

body[data-tema] .pa-area-tab.active {
    border-color: var(--band);
    background: var(--band-tint);
    color: var(--band-deep);
}

body[data-tema] .pa-area-panel {
    background: var(--bg-1);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-4);
    box-shadow: var(--shadow-1);
    overflow: hidden;
    animation: pa-fade 240ms var(--easing-standard);
}

body[data-tema] .pa-area-panel[hidden] { display: none; }

body[data-tema] .pa-area-head {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px 28px;
    background: var(--band-tint);
    border-bottom: 1px solid var(--border-1);
}

body[data-tema] .pa-area-head .ico {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--band);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
}

body[data-tema] .pa-area-head .lab {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--band-deep);
}

body[data-tema] .pa-area-head h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 24px;
    margin: 2px 0 0;
    color: var(--ink);
}

body[data-tema] .pa-comps {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

body[data-tema] .pa-comp {
    display: flex;
    gap: 14px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--bg-3);
    border-right: 1px solid var(--bg-3);
}

body[data-tema] .pa-comp .code {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 13px;
    color: var(--band-deep);
    flex-shrink: 0;
}

body[data-tema] .pa-comp .name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14.5px;
    color: var(--ink);
    margin-bottom: 3px;
}

body[data-tema] .pa-comp .blurb {
    font-size: 12.5px;
    color: var(--fg-2);
    line-height: 1.5;
}

/* ----- Perfils ----- */
body[data-tema] .pa-profile {
    --band: var(--digcomp-a2);
    background: var(--bg-1);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-4);
    overflow: hidden;
    box-shadow: var(--shadow-1);
}

body[data-tema] .pa-profile-head {
    background: var(--band-tint);
    padding: 18px 20px 16px;
    border-bottom: 1px solid var(--border-1);
}

body[data-tema] .pa-profile-head .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

body[data-tema] .pa-profile-head .n {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--band);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body[data-tema] .pa-profile-head .lvl {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--band-deep);
}

body[data-tema] .pa-profile-head h3 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 21px;
    margin: 0;
    color: var(--ink);
    letter-spacing: -.01em;
}

body[data-tema] .pa-profile p {
    font-size: 13.5px;
    color: var(--fg-2);
    line-height: 1.55;
    padding: 16px 20px 20px;
    margin: 0;
}

/* ----- Tutors ----- */
body[data-tema] .pa-tutor {
    background: var(--bg-2);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-4);
    padding: 22px 18px;
    text-align: center;
}

body[data-tema] .pa-tutor .av {
    --ab: var(--digcomp-a1);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--ab);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

body[data-tema] .pa-tutor .nm {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
}

body[data-tema] .pa-tutor .ar {
    font-size: 12px;
    color: var(--fg-3);
    margin-top: 3px;
}

/* ----- Banda CTA ----- */
body[data-tema] .pa-cta {
    padding: 64px 0;
    background: linear-gradient(120deg, var(--preparacio-orange) 0%, var(--preparacio-orange-deep) 100%);
    border: 0;
    text-align: center;
}

body[data-tema] .pa-cta h2 {
    font-size: 38px;
    color: #fff;
    margin: 0 0 14px;
    letter-spacing: -.015em;
}

body[data-tema] .pa-cta p {
    font-size: 16px;
    color: rgba(255, 255, 255, .9);
    margin: 0 0 26px;
    line-height: 1.6;
}

body[data-tema] .pa-cta .btn-white {
    background: #fff;
    color: var(--preparacio-orange-deep);
    border: 0;
    font-family: var(--font-display);
    font-weight: 700;
    padding: 14px 26px;
    border-radius: var(--radius-2);
}

body[data-tema] .pa-cta .btn-line {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, .6);
    font-family: var(--font-display);
    font-weight: 700;
    padding: 14px 26px;
    border-radius: var(--radius-2);
}

/* ----- Footer fosc ----- */
body[data-tema] footer,
body[data-tema] .pa-footer {
    background: var(--ink);
    color: rgba(255, 255, 255, .85);
}

body[data-tema] footer,
body[data-tema] footer.text-center {
    text-align: left;
    padding: 56px 0 22px !important;
}

body[data-tema] footer .container-lg { max-width: 1140px; }
/* _footer.php embolcalla el contingut en <div><span> inline: el fem bloc full-width. */
body[data-tema] footer .container-lg > div,
body[data-tema] footer .container-lg > div > span { display: block; }

body[data-tema] .pa-footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
    gap: 36px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    text-align: left;
}

body[data-tema] .pa-footer-grid p { margin: 14px 0 0; }

/* h4 i h5: l'editor del panell no té nivell 5 i el converteix en 4, així que un
   peu que hi passi torna amb <h4>. Val per als dos. */
body[data-tema] .pa-footer-grid h5,
body[data-tema] .pa-footer-grid h4 {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--preparacio-orange);
    margin: 0 0 14px;
}

body[data-tema] .pa-footer-grid a {
    display: block;
    color: rgba(255, 255, 255, .78);
    font-size: 13px;
    margin-bottom: 9px;
    text-decoration: none;
}

body[data-tema] .pa-footer-grid a:hover { color: #fff; }

body[data-tema] .pa-footer-contact {
    background: rgba(255, 150, 0, .08);
    border: 1px solid rgba(255, 150, 0, .28);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .85);
    margin-bottom: 12px;
}

body[data-tema] .pa-footer-mail {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    color: #fff !important;
    font-family: var(--font-mono);
    font-size: 12px;
    padding: 9px 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    margin: 0 !important;
}

body[data-tema] .pa-footer-base {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding-top: 18px;
    font-size: 11.5px;
    color: rgba(255, 255, 255, .55);
}

body[data-tema] .pa-footer-base .legal { display: flex; gap: 14px; }
body[data-tema] .pa-footer-base .legal a { color: rgba(255, 255, 255, .55); text-decoration: none; }
body[data-tema] .pa-footer-base .legal a:hover { color: #fff; }

@media (max-width: 900px) {
    body[data-tema] .pa-footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}

@media (max-width: 560px) {
    body[data-tema] .pa-footer-grid { grid-template-columns: 1fr; }
}

@keyframes pa-fade {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

/* ----- Responsive ----- */
/* ----- Barra d'avís superior ----- */
body[data-tema] .pa-notice {
    background: var(--preparacio-orange-tint);
    border-bottom: 1px solid var(--preparacio-orange-soft);
    padding: 9px 24px;
    text-align: center;
    font-size: 13px;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* Cada avís de la barra: text + botó opcional, centrats i partibles en pantalla estreta. */
body[data-tema] .pa-notice-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 5px 14px;
}

/* L'anunci del canvi, mentre encara no és vigent, va per sota i en segon terme. */
body[data-tema] .pa-notice-fila-secundaria {
    font-size: 12px;
    color: var(--fg-2);
}

body[data-tema] .pa-notice strong {
    color: var(--preparacio-orange-deep);
    font-family: var(--font-display);
    letter-spacing: .02em;
}

/* Enllaç als continguts de l'ACTIC anterior, dins la mateixa barra d'avís. */
body[data-tema] a.pa-notice-btn {
    flex: none;
    background: var(--bg-1);
    border: 1.5px solid var(--preparacio-orange);
    border-radius: 999px;
    padding: 3px 13px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
    line-height: 1.6;
    color: var(--preparacio-orange-deep);
    text-decoration: none;
    white-space: nowrap;
    transition: background 160ms var(--easing-standard), color 160ms var(--easing-standard);
}

body[data-tema] a.pa-notice-btn:hover,
body[data-tema] a.pa-notice-btn:focus {
    background: var(--preparacio-orange);
    border-color: var(--preparacio-orange);
    color: #fff;
    text-decoration: none;
}

/* ----- Prova de nivell + mini-quiz ----- */
body[data-tema] .pa-prova-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

body[data-tema] .pa-quiz-card {
    background: var(--bg-1);
    border: 1px solid var(--border-1);
    border-radius: 16px;
    box-shadow: var(--shadow-2);
    padding: 26px 26px 24px;
}

body[data-tema] .pa-quiz-opt {
    text-align: left;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--ink);
    background: var(--bg-1);
    border: 1.5px solid var(--border-2);
    border-radius: 10px;
    padding: 13px 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    transition: border-color 160ms var(--easing-standard), background 160ms var(--easing-standard);
}

body[data-tema] .pa-quiz-opt .dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--border-2);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
}

body[data-tema] .pa-quiz-opt .dot i { display: none; }
body[data-tema] .pa-quiz-opt.is-correct { border-color: var(--digcomp-a4); background: var(--digcomp-a4-tint); }
body[data-tema] .pa-quiz-opt.is-correct .dot { border-color: var(--digcomp-a4); background: var(--digcomp-a4); }
body[data-tema] .pa-quiz-opt.is-correct .dot .fa-check { display: inline; }
body[data-tema] .pa-quiz-opt.is-wrong { border-color: var(--digcomp-a5); background: var(--digcomp-a5-tint); }
body[data-tema] .pa-quiz-opt.is-wrong .dot { border-color: var(--digcomp-a5); background: var(--digcomp-a5); }
body[data-tema] .pa-quiz-opt.is-wrong .dot .fa-xmark { display: inline; }

body[data-tema] .pa-quiz-result {
    margin-top: 16px;
    padding: 14px 16px;
    background: var(--digcomp-a4-tint);
    border-radius: 10px;
    font-size: 13.5px;
    color: var(--ink);
    line-height: 1.55;
    animation: pa-fade 200ms var(--easing-standard);
}

body[data-tema] .pa-quiz-result[hidden] { display: none; }
body[data-tema] .pa-quiz-result strong { font-family: var(--font-display); color: var(--digcomp-a4-deep); }

/* ----- Cursos destacats ----- */
body[data-tema] .pa-course {
    background: var(--bg-1);
    border: 1px solid var(--border-1);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-1);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: box-shadow 200ms var(--easing-standard), transform 200ms var(--easing-standard);
}

body[data-tema] .pa-course:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-3px);
}

body[data-tema] .pa-course-cover {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: linear-gradient(135deg, var(--band, var(--digcomp-a1)) 0%, color-mix(in oklab, var(--band, var(--digcomp-a1)) 70%, #000 30%) 100%);
}

body[data-tema] .pa-course-cover.has-img { background: var(--bg-3); }

body[data-tema] .pa-course-cover.has-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Portada generada (sense imatge): bombolles decoratives + inicials del curs. */
body[data-tema] .pa-course-bubble {
    position: absolute;
    border-radius: 50%;
    aspect-ratio: 1;
    mix-blend-mode: screen;
}

body[data-tema] .pa-course-bubble.b1 {
    width: 78%;
    right: -16%;
    top: -24%;
    background: color-mix(in oklab, var(--band) 50%, #fff 50%);
    opacity: .4;
}

body[data-tema] .pa-course-bubble.b2 {
    width: 52%;
    left: -10%;
    bottom: -22%;
    background: var(--band);
    opacity: .3;
}

body[data-tema] .pa-course-wm {
    position: absolute;
    right: 14px;
    bottom: -10px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 80px;
    line-height: .9;
    letter-spacing: -.04em;
    color: var(--bink, rgba(255, 255, 255, .95));
    opacity: .18;
    user-select: none;
}

body[data-tema] .pa-course-date {
    position: absolute;
    bottom: 12px;
    left: 16px;
    background: rgba(255, 255, 255, .95);
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
}

body[data-tema] .pa-course-body {
    padding: 15px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1;
}

body[data-tema] .pa-course-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
    line-height: 1.3;
    margin: 0;
    min-height: 39px;
}

body[data-tema] .pa-course-tutor {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--fg-2);
}

body[data-tema] .pa-course-avatar {
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--band, var(--preparacio-orange));
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body[data-tema] .pa-course-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--border-1);
}

body[data-tema] .pa-course-tag {
    font-size: 11px;
    color: var(--fg-3);
    font-family: var(--font-mono);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body[data-tema] .pa-course-detall {
    flex: none;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    color: var(--spin-blue-deep);
}

/* ----- Catàleg «Tots els cursos» ----- */
body[data-tema] .pa-catalog-head {
    padding: 48px 0 28px;
    background: linear-gradient(180deg, var(--white) 0%, var(--bg-2) 100%);
    border-bottom: 1px solid var(--border-1);
}

body[data-tema] .pa-catalog-title {
    font-size: 44px;
    margin: 8px 0 8px;
    letter-spacing: -.015em;
    color: var(--ink);
}

body[data-tema] .pa-catalog-lead { color: var(--fg-2); margin: 0 0 26px; }
body[data-tema] .pa-catalog-lead strong { color: var(--ink); }

/* Filtre segmentat (estil handoff). */
body[data-tema] .pa-filter {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    background: var(--bg-3);
    border-radius: var(--radius-pill);
    padding: 4px;
}

body[data-tema] .pa-filter-pill {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
    border: 0;
    padding: 8px 15px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    background: transparent;
    color: var(--fg-2);
    transition: all 160ms var(--easing-standard);
}

body[data-tema] .pa-filter-pill.is-active {
    background: var(--white);
    color: var(--ink);
    box-shadow: var(--shadow-1);
}

body[data-tema] .pa-catalog-grid-sec { padding: 36px 0 72px; }

body[data-tema] .pa-catalog-empty {
    text-align: center;
    padding: 60px 0;
    color: var(--fg-3);
}

body[data-tema] .pa-course[hidden] { display: none; }

/* ----- Fitxa de curs ----- */
body[data-tema] .pa-curs { padding: 28px 0 56px; }

body[data-tema] .pa-curs-crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 12px;
    color: var(--fg-3);
    margin-bottom: 20px;
}

body[data-tema] .pa-curs-crumb a {
    color: var(--fg-2);
    font-weight: 600;
    text-decoration: none;
}

body[data-tema] .pa-curs-crumb a:hover { color: var(--preparacio-orange-deep); }
body[data-tema] .pa-curs-crumb .sep { color: var(--border-2); }

body[data-tema] .pa-curs-head {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 36px;
    align-items: start;
    margin-bottom: 38px;
}

/* 16:9 com les portades del catàleg: les imatges reals dels cursos són banners
   apaïsats i el 4/5 del handoff (un pòster generat) en retallava més de mitja. */
body[data-tema] .pa-curs-cover {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-2);
    background: linear-gradient(140deg, var(--band) 0%, color-mix(in oklab, var(--band) 68%, #000 32%) 100%);
}

body[data-tema] .pa-curs-cover.has-img { background: var(--bg-3); }

body[data-tema] .pa-curs-cover.has-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body[data-tema] .pa-curs-cover .pa-course-wm { font-size: 120px; bottom: -14px; }

body[data-tema] .pa-curs-title {
    font-size: 34px;
    line-height: 1.12;
    margin: 6px 0 12px;
    letter-spacing: -.015em;
    color: var(--ink);
}

body[data-tema] .pa-curs-lead {
    color: var(--fg-2);
    margin: 0 0 18px;
    max-width: 620px;
}

body[data-tema] .pa-curs-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 14px;
    padding: 16px;
    background: var(--bg-3);
    border-radius: 10px;
    margin: 0 0 20px;
    max-width: 600px;
}

body[data-tema] .pa-curs-stat { display: flex; flex-direction: column; gap: 3px; }

body[data-tema] .pa-curs-stat .k {
    font-size: 10px;
    font-family: var(--font-display);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fg-3);
}

body[data-tema] .pa-curs-stat .v {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    color: var(--ink);
}

body[data-tema] .pa-curs-cta { display: flex; gap: 12px; flex-wrap: wrap; }

body[data-tema] .pa-curs-body {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 36px;
    align-items: start;
}

body[data-tema] .pa-curs-h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    color: var(--ink);
    margin: 0 0 14px;
}

body[data-tema] .pa-curs-contingut {
    background: var(--white);
    border: 1px solid var(--border-1);
    border-radius: 14px;
    box-shadow: var(--shadow-1);
    padding: 8px 18px 18px;
}

/* L'acordió funcional (Bootstrap) heretat: ajusts perquè encaixi amb el tema. */
body[data-tema] .pa-curs-contingut .ml-2 { margin-left: 0 !important; }
body[data-tema] .pa-curs-contingut .bg-light { background: var(--bg-2) !important; border-radius: 8px; }
body[data-tema] .pa-curs-contingut .row.font-weight-bold,
body[data-tema] .pa-curs-contingut .text-dark { font-family: var(--font-display); color: var(--ink) !important; }
body[data-tema] .pa-curs-contingut .btn-info,
body[data-tema] .pa-curs-contingut .btn-success {
    background: var(--preparacio-orange);
    border-color: var(--preparacio-orange);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
}
body[data-tema] .pa-curs-contingut .btn-secondary {
    background: var(--bg-3);
    border-color: var(--border-2);
    color: var(--fg-1);
    font-family: var(--font-display);
    font-weight: 700;
}

body[data-tema] .pa-curs-aside { position: sticky; top: 90px; }

body[data-tema] .pa-curs-card {
    background: var(--white);
    border: 1px solid var(--border-1);
    border-radius: 14px;
    box-shadow: var(--shadow-1);
    padding: 20px;
}

body[data-tema] .pa-curs-card-t {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    color: var(--ink);
    margin-bottom: 12px;
}

body[data-tema] .pa-curs-incls {
    list-style: none;
    padding: 0;
    margin: 0 0 4px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

body[data-tema] .pa-curs-incls li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--fg-1);
}

body[data-tema] .pa-curs-incls i { color: var(--digcomp-a3-deep); margin-top: 2px; }

body[data-tema] .pa-curs-preu {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 26px;
    color: var(--ink);
    margin: 14px 0 2px;
}

body[data-tema] .pa-curs-inici { font-size: 12.5px; color: var(--fg-2); margin: 6px 0 0; }
body[data-tema] .pa-curs-card-cta { width: 100%; margin-top: 16px; text-align: center; }
body[data-tema] .pa-curs-nota {
    font-size: 11.5px;
    color: var(--fg-3);
    text-align: center;
    margin: 10px 0 0;
}

body[data-tema] .pa-curs-related {
    padding: 56px 0;
    background: var(--white);
    border-top: 1px solid var(--border-1);
}

body[data-tema] .pa-curs-related-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 26px;
    gap: 20px;
    flex-wrap: wrap;
}

body[data-tema] .pa-curs-related-head h2 { font-size: 28px; margin: 6px 0 0; color: var(--ink); }

@media (max-width: 900px) {
    body[data-tema] .pa-curs-head { grid-template-columns: 1fr; }
    body[data-tema] .pa-curs-cover { max-width: 440px; }
    body[data-tema] .pa-curs-body { grid-template-columns: 1fr; }
    body[data-tema] .pa-curs-aside { position: static; }
}

/* ----- Contacte / Demana informació ----- */
body[data-tema] .pa-contacte-hero {
    background: linear-gradient(180deg, var(--white) 0%, var(--bg-2) 100%);
    padding: 52px 0 40px;
    border-bottom: 1px solid var(--border-1);
}

body[data-tema] .pa-contacte-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    color: var(--fg-2);
    text-decoration: none;
    margin-bottom: 18px;
}

body[data-tema] .pa-contacte-back:hover { color: var(--preparacio-orange-deep); }

body[data-tema] .pa-contacte-title {
    font-size: 44px;
    line-height: 1.05;
    letter-spacing: -.02em;
    margin: 4px 0 12px;
    color: var(--ink);
}

body[data-tema] .pa-contacte-lead { font-size: 17px; color: var(--fg-2); margin: 0; max-width: 600px; }

body[data-tema] .pa-contacte-body {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 40px;
    align-items: start;
    padding-top: 44px;
    padding-bottom: 72px;
}

body[data-tema] .pa-contacte-form {
    background: var(--white);
    border: 1px solid var(--border-1);
    border-radius: 16px;
    box-shadow: var(--shadow-1);
    padding: 30px 32px;
}

body[data-tema] .pa-contacte-form h4 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 21px;
    color: var(--ink);
    margin: 0 0 18px;
    letter-spacing: -.01em;
}

/* Camps del formulari real (Bootstrap .form-control) restilats com .fld. */
body[data-tema] .pa-contacte-form .form-control {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-body);
    font-size: 14.5px;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--border-1);
    border-radius: 9px;
    padding: 12px 14px;
    height: auto;
    transition: border-color 160ms var(--easing-standard), box-shadow 160ms var(--easing-standard);
}

body[data-tema] .pa-contacte-form .form-control::placeholder { color: var(--fg-3); }

body[data-tema] .pa-contacte-form .form-control:focus {
    outline: none;
    border-color: var(--preparacio-orange);
    box-shadow: 0 0 0 3px var(--preparacio-orange-tint);
}

body[data-tema] .pa-contacte-form textarea.form-control { resize: vertical; min-height: 116px; line-height: 1.55; }
body[data-tema] .pa-contacte-form .form-check-label { font-size: 12.5px; color: var(--fg-2); }
body[data-tema] .pa-contacte-form .form-check-label a { color: var(--preparacio-orange-deep); }

body[data-tema] .pa-contacte-aside { display: flex; flex-direction: column; gap: 16px; }

body[data-tema] .pa-contacte-card {
    background: var(--white);
    border: 1px solid var(--border-1);
    border-radius: 14px;
    box-shadow: var(--shadow-1);
    padding: 22px 24px;
}

body[data-tema] .pa-contacte-card h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    margin: 0 0 16px;
    color: var(--ink);
}

body[data-tema] .pa-contacte-chan {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

body[data-tema] .pa-contacte-chan:last-child { margin-bottom: 0; }

body[data-tema] .pa-contacte-chan .ico {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: var(--preparacio-orange-tint);
    color: var(--preparacio-orange-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body[data-tema] .pa-contacte-chan .k {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13.5px;
    color: var(--ink);
    margin-bottom: 2px;
}

body[data-tema] .pa-contacte-chan .v {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--fg-2);
    line-height: 1.4;
    text-decoration: none;
}

body[data-tema] a.v:hover { color: var(--preparacio-orange-deep); }

body[data-tema] .pa-contacte-cta {
    background: var(--preparacio-orange-tint);
    border-radius: 14px;
    padding: 22px 24px;
}

body[data-tema] .pa-contacte-cta .t {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
    margin-bottom: 6px;
}

body[data-tema] .pa-contacte-cta p { font-size: 13px; color: var(--fg-2); line-height: 1.55; margin: 0 0 14px; }
body[data-tema] .pa-contacte-cta .btn { width: 100%; }

@media (max-width: 900px) {
    body[data-tema] .pa-contacte-body { grid-template-columns: 1fr; }
}

/* ----- Modals (login, recuperar contrasenya, missatges) ----- */
body[data-tema] .modal-content {
    border: 1px solid var(--border-1);
    border-radius: 16px;
    box-shadow: var(--shadow-2);
    font-family: var(--font-body);
    overflow: hidden;
}

body[data-tema] .modal-header {
    border-bottom: 1px solid var(--border-1);
    padding: 20px 24px 14px;
}

body[data-tema] .modal-title {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ink);
}

body[data-tema] .modal-body { padding: 18px 24px; color: var(--fg-1); }
body[data-tema] .modal-footer { border-top: 1px solid var(--border-1); padding: 14px 24px; }

body[data-tema] .modal .form-control {
    box-sizing: border-box;
    font-family: var(--font-body);
    font-size: 14.5px;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--border-1);
    border-radius: 9px;
    padding: 12px 14px;
    height: auto;
    margin-bottom: 4px;
    transition: border-color 160ms var(--easing-standard), box-shadow 160ms var(--easing-standard);
}

body[data-tema] .modal .form-control::placeholder { color: var(--fg-3); }

body[data-tema] .modal .form-control:focus {
    outline: none;
    border-color: var(--preparacio-orange);
    box-shadow: 0 0 0 3px var(--preparacio-orange-tint);
}

body[data-tema] .modal .form-group a,
body[data-tema] .modal-body a:not(.btn) {
    color: var(--preparacio-orange-deep);
    font-family: var(--font-display);
    font-weight: 600;
}

/* ===== Pàgines públiques: hero compartit ===== */
body[data-tema] .pa-page-hero {
    background: linear-gradient(180deg, var(--white) 0%, var(--bg-2) 100%);
    padding: 56px 0 46px;
    border-bottom: 1px solid var(--border-1);
}

body[data-tema] .pa-page-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    color: var(--fg-2);
    text-decoration: none;
    margin-bottom: 22px;
}

body[data-tema] .pa-page-back:hover { color: var(--preparacio-orange-deep); }

body[data-tema] .pa-page-title {
    font-size: 48px;
    line-height: 1.04;
    letter-spacing: -.02em;
    margin: 0 0 16px;
    color: var(--ink);
    max-width: 760px;
}

body[data-tema] .pa-page-lead { font-size: 18px; color: var(--fg-2); margin: 0; max-width: 660px; }

body[data-tema] .pa-hero-stats { display: flex; gap: 26px; margin-top: 34px; flex-wrap: wrap; }
body[data-tema] .pa-hero-stat { border-left: 2px solid var(--bar, var(--preparacio-orange)); padding-left: 16px; }
body[data-tema] .pa-hero-stat .num { font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--ink); line-height: 1; }
body[data-tema] .pa-hero-stat .lab { font-size: 12px; color: var(--fg-3); margin-top: 4px; }

body[data-tema] .pa-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ===== Com funciona ===== */
body[data-tema] .pa-steps { display: flex; flex-direction: column; gap: 18px; }

body[data-tema] .pa-step {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 24px;
    align-items: start;
    background: var(--bg-2);
    border: 1px solid var(--border-1);
    border-radius: 16px;
    padding: 26px 28px;
}

body[data-tema] .pa-step-num { display: flex; flex-direction: column; align-items: center; gap: 10px; }

body[data-tema] .pa-step-num .ico {
    width: 52px;
    height: 52px;
    border-radius: 13px;
    background: var(--preparacio-orange-tint);
    color: var(--preparacio-orange-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

body[data-tema] .pa-step-num .n { font-family: var(--font-mono); font-size: 13px; color: var(--fg-3); font-weight: 600; }
body[data-tema] .pa-step h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; margin: 2px 0 8px; color: var(--ink); }
body[data-tema] .pa-step p { font-size: 14.5px; color: var(--fg-2); line-height: 1.6; margin: 0 0 14px; max-width: 720px; }
body[data-tema] .pa-step-tags { display: flex; gap: 8px; flex-wrap: wrap; }

body[data-tema] .pa-step-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--white);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-pill);
    padding: 6px 12px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--fg-1);
}

body[data-tema] .pa-step-tag i { color: var(--preparacio-orange-deep); font-size: 11px; }

body[data-tema] .pa-feat-card {
    background: var(--white);
    border: 1px solid var(--border-1);
    border-radius: 14px;
    padding: 24px 22px;
    box-shadow: var(--shadow-1);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body[data-tema] .pa-feat-card .ico {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: var(--bandt, var(--preparacio-orange-tint));
    color: var(--bandd, var(--preparacio-orange-deep));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

body[data-tema] .pa-feat-card h4 { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; margin: 2px 0 0; color: var(--ink); }
body[data-tema] .pa-feat-card p { font-size: 13.5px; color: var(--fg-2); line-height: 1.55; margin: 0; }

/* Perfils (compartit Com funciona + Dubtes) */
body[data-tema] .pa-profile {
    background: var(--white);
    border: 1px solid var(--border-1);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-1);
    padding: 0;
}

body[data-tema] .pa-profile-head {
    background: var(--bandt);
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--border-1);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

body[data-tema] .pa-profile-head .n {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--band);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body[data-tema] .pa-profile-head .lvl {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bandd);
}

body[data-tema] .pa-profile h3 { font-family: var(--font-display); font-weight: 800; font-size: 21px; margin: 0; color: var(--ink); padding: 14px 20px 0; letter-spacing: -.01em; }
body[data-tema] .pa-profile > p { font-size: 13.5px; color: var(--fg-2); line-height: 1.55; padding: 8px 20px 20px; margin: 0; }

body[data-tema] .pa-profile-pts { list-style: none; padding: 14px 20px 20px; margin: 0; display: flex; flex-direction: column; gap: 11px; }
body[data-tema] .pa-profile-pts li { display: flex; gap: 9px; font-size: 13.5px; color: var(--fg-1); line-height: 1.5; }
body[data-tema] .pa-profile-pts li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--band); flex: none; margin-top: 7px; }

body[data-tema] .pa-tutors { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }

body[data-tema] .pa-tutor {
    background: var(--bg-2);
    border: 1px solid var(--border-1);
    border-radius: 14px;
    padding: 22px 18px;
    text-align: center;
}

body[data-tema] .pa-tutor .av {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--ab, var(--preparacio-orange));
    color: #fff;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

body[data-tema] .pa-tutor .nom { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); }
body[data-tema] .pa-tutor .ar { font-size: 12px; color: var(--fg-3); margin-top: 3px; }

/* ===== Preus ===== */
body[data-tema] .pa-preus { padding: 50px 0 72px; }
body[data-tema] .pa-preus .pa-page-title { font-size: 40px; margin: 10px 0 12px; }

body[data-tema] .pa-plans {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    align-items: stretch;
    margin-top: 40px;
}

body[data-tema] .pa-plan {
    position: relative;
    background: var(--white);
    border: 1px solid var(--border-1);
    border-radius: 16px;
    box-shadow: var(--shadow-1);
    padding: 26px 22px 24px;
    display: flex;
    flex-direction: column;
}

body[data-tema] .pa-plan.featured { border: 2px solid var(--preparacio-orange); box-shadow: var(--shadow-2); }

body[data-tema] .pa-plan .badge-rec {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--preparacio-orange);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

body[data-tema] .pa-plan h3 { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--ink); margin: 0 0 3px; }
body[data-tema] .pa-plan .tagline { font-size: 12.5px; color: var(--fg-3); margin: 0 0 16px; min-height: 32px; line-height: 1.4; }
body[data-tema] .pa-plan-price { font-family: var(--font-display); font-weight: 800; font-size: 36px; letter-spacing: -.02em; color: var(--ink); margin-bottom: 4px; }
body[data-tema] .pa-plan-meta { font-size: 12px; color: var(--fg-3); font-family: var(--font-mono); margin: 0 0 18px; }
body[data-tema] .pa-plan-cta { width: 100%; box-sizing: border-box; text-align: center; margin-bottom: 18px; }
body[data-tema] .pa-plan-feats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
body[data-tema] .pa-plan-feats li { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.45; color: var(--fg-1); }
body[data-tema] .pa-plan-feats li i { font-size: 13px; margin-top: 1px; flex: none; }
body[data-tema] .pa-plan-feats li.ok i { color: var(--digcomp-a4-deep); }
body[data-tema] .pa-plan-feats li.no { color: var(--fg-3); }
body[data-tema] .pa-plan-feats li.no i { color: var(--border-2); }

body[data-tema] .pa-compare {
    margin-top: 44px;
    background: var(--white);
    border: 1px solid var(--border-1);
    border-radius: 16px;
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

body[data-tema] .pa-compare h2 { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--ink); margin: 0; padding: 22px 26px 6px; }
body[data-tema] .pa-compare-scroll { overflow-x: auto; }
body[data-tema] .pa-compare table { width: 100%; border-collapse: collapse; font-size: 13.5px; }

body[data-tema] .pa-compare th {
    text-align: center;
    padding: 16px 14px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13.5px;
    color: var(--ink);
    border-bottom: 1px solid var(--border-1);
}

body[data-tema] .pa-compare th.lab {
    text-align: left;
    padding: 16px 26px;
    font-size: 12px;
    color: var(--fg-3);
    letter-spacing: .04em;
    text-transform: uppercase;
}

body[data-tema] .pa-compare td { text-align: center; padding: 13px 14px; border-bottom: 1px solid var(--bg-3); }
body[data-tema] .pa-compare td.lab { text-align: left; padding: 13px 26px; color: var(--fg-1); font-weight: 500; }
body[data-tema] .pa-compare td.txt { font-family: var(--font-mono); font-size: 12.5px; color: var(--fg-1); }
body[data-tema] .pa-compare .ok { color: var(--digcomp-a4-deep); }
body[data-tema] .pa-compare .no { color: var(--border-2); }
body[data-tema] .pa-compare th.feat, body[data-tema] .pa-compare td.feat { background: var(--preparacio-orange-tint); }
body[data-tema] .pa-compare th.feat { color: var(--preparacio-orange-deep); }

body[data-tema] .pa-preus-foot { text-align: center; font-size: 13px; color: var(--fg-3); margin: 26px 0 0; }
body[data-tema] .pa-preus-foot a { font-family: var(--font-display); font-weight: 700; color: var(--preparacio-orange-deep); }

/* ===== Dubtes ===== */
body[data-tema] .pa-dubtes { padding: 52px 0 80px; }
body[data-tema] .pa-dubtes-grid { display: grid; grid-template-columns: 232px 1fr; gap: 56px; align-items: start; }
body[data-tema] .pa-dubtes-nav { position: sticky; top: 92px; }
body[data-tema] .pa-dubtes-nav .cat { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); margin: 0 0 14px; }
body[data-tema] .pa-dubtes-nav nav { display: flex; flex-direction: column; gap: 2px; }

body[data-tema] .pa-dubtes-nav nav a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    border-radius: 8px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    color: var(--fg-1);
    text-decoration: none;
}

body[data-tema] .pa-dubtes-nav nav a:hover { color: var(--preparacio-orange-deep); }
body[data-tema] .pa-dubtes-nav nav a .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-2); flex: none; }
body[data-tema] .pa-dubtes-nav nav a:hover .dot { background: var(--preparacio-orange); }

body[data-tema] .pa-dubtes-help { margin-top: 26px; padding: 18px; background: var(--preparacio-orange-tint); border-radius: 12px; }
body[data-tema] .pa-dubtes-help .t { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink); margin-bottom: 5px; }
body[data-tema] .pa-dubtes-help p { font-size: 12.5px; color: var(--fg-2); line-height: 1.5; margin: 0 0 12px; }
body[data-tema] .pa-dubtes-help .btn { width: 100%; }

body[data-tema] .pa-dubtes-main { display: flex; flex-direction: column; gap: 52px; }
body[data-tema] .pa-dubtes-h2 { font-size: 30px; margin: 2px 0 14px; letter-spacing: -.01em; color: var(--ink); }

body[data-tema] .pa-dubtes-card { background: var(--white); border: 1px solid var(--border-1); border-radius: 14px; padding: 26px 28px; box-shadow: var(--shadow-1); }
body[data-tema] .pa-dubtes-card .big { font-size: 16px; color: var(--ink); line-height: 1.6; margin: 0 0 14px; }
body[data-tema] .pa-dubtes-card p { font-size: 14.5px; color: var(--fg-2); line-height: 1.65; margin: 0 0 16px; }
body[data-tema] .pa-dubtes-pills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
body[data-tema] .pa-dubtes-pills .pill { display: flex; align-items: flex-start; gap: 10px; background: var(--bg-2); border-radius: 10px; padding: 14px; font-size: 13px; color: var(--fg-1); line-height: 1.45; }
body[data-tema] .pa-dubtes-pills .pill i { color: var(--preparacio-orange-deep); margin-top: 1px; }

body[data-tema] .pa-dubtes-arees { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
body[data-tema] .pa-darea { background: var(--white); border: 1px solid var(--border-1); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-1); }
body[data-tema] .pa-darea-head { background: var(--bandt); padding: 15px 18px; border-bottom: 1px solid var(--border-1); display: flex; align-items: center; gap: 13px; }
body[data-tema] .pa-darea-head .n { width: 36px; height: 36px; border-radius: 9px; background: var(--band); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 17px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
body[data-tema] .pa-darea-head h3 { font-family: var(--font-display); font-weight: 700; font-size: 16px; margin: 0; color: var(--ink); line-height: 1.25; }
body[data-tema] .pa-darea ul { list-style: none; padding: 14px 18px 16px; margin: 0; display: flex; flex-direction: column; gap: 8px; }
body[data-tema] .pa-darea li { display: flex; gap: 9px; font-size: 13px; color: var(--fg-2); line-height: 1.5; }
body[data-tema] .pa-darea li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--band); flex: none; margin-top: 6px; }

body[data-tema] .pa-faqs { display: flex; flex-direction: column; gap: 12px; }
body[data-tema] .pa-faq-d { background: var(--white); border: 1px solid var(--border-1); border-radius: 12px; overflow: hidden; }
body[data-tema] .pa-faq-d summary { display: flex; align-items: center; gap: 16px; padding: 18px 22px; cursor: pointer; list-style: none; }
body[data-tema] .pa-faq-d summary::-webkit-details-marker { display: none; }
body[data-tema] .pa-faq-d .q { flex: 1; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink); }
body[data-tema] .pa-faq-d .chev { color: var(--preparacio-orange-deep); transition: transform 200ms var(--easing-standard); flex: none; }
body[data-tema] .pa-faq-d[open] .chev { transform: rotate(180deg); }
body[data-tema] .pa-faq-d .a { padding: 0 22px 20px; font-size: 14px; color: var(--fg-2); line-height: 1.65; }

/* ===== Prova de nivell (pàgina inicial) ===== */
body[data-tema] .pa-prova-page { padding: 56px 0 72px; }
body[data-tema] .pa-prova-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: start; max-width: 1080px; }
/* Un fill de graella té `min-width: auto`, o sigui que la columna no baixa mai del
   min-content del seu contingut: a una sola columna, la targeta (que en porta la
   fila de passes, que no embolcalla) estirava la columna i s'enduia també el bloc
   de context, que quedava tallat per la dreta. */
body[data-tema] .pa-prova-grid > * { min-width: 0; }

body[data-tema] .pa-prova-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 42px;
    line-height: 1.06;
    letter-spacing: -.02em;
    color: var(--ink);
    margin: 10px 0 14px;
}

body[data-tema] .pa-prova-lead { font-size: 18px; color: var(--fg-1); margin: 0 0 26px; max-width: 460px; }

body[data-tema] .pa-prova-points { list-style: none; padding: 0; margin: 0 0 30px; display: flex; flex-direction: column; gap: 14px; }
body[data-tema] .pa-prova-points li { display: flex; align-items: flex-start; gap: 12px; }

body[data-tema] .pa-prova-points .ico {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--preparacio-orange-tint);
    color: var(--preparacio-orange-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

body[data-tema] .pa-prova-points .txt { font-size: 14.5px; color: var(--fg-1); line-height: 1.5; padding-top: 5px; }

body[data-tema] .pa-prova-stats {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 14px 20px;
    background: var(--white);
    border: 1px solid var(--border-1);
    border-radius: 12px;
    box-shadow: var(--shadow-1);
}

body[data-tema] .pa-prova-stats .stat { text-align: center; }
body[data-tema] .pa-prova-stats .n { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--ink); line-height: 1; }
body[data-tema] .pa-prova-stats .n.hl { color: var(--preparacio-orange-deep); }
body[data-tema] .pa-prova-stats .l { font-size: 11px; color: var(--fg-3); margin-top: 3px; }
body[data-tema] .pa-prova-stats .sep { width: 1px; height: 30px; background: var(--border-1); }

body[data-tema] .pa-prova-card {
    background: var(--white);
    border: 1px solid var(--border-1);
    border-radius: 16px;
    box-shadow: var(--shadow-2);
    padding: 30px 30px 28px;
}

body[data-tema] .pa-prova-steps { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
body[data-tema] .pa-prova-steps .step { display: inline-flex; align-items: center; gap: 8px; }

body[data-tema] .pa-prova-steps .badge {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    background: var(--white);
    color: var(--fg-3);
    border: 1px solid var(--border-1);
}

body[data-tema] .pa-prova-steps .badge.on { background: var(--preparacio-orange); color: #fff; border-color: var(--preparacio-orange); }
body[data-tema] .pa-prova-steps .name { font-family: var(--font-display); font-weight: 600; font-size: 12.5px; color: var(--fg-3); }
body[data-tema] .pa-prova-steps .name.on { color: var(--ink); }
body[data-tema] .pa-prova-steps .divider { width: 22px; height: 1px; background: var(--border-1); }

body[data-tema] .pa-prova-h2 { font-family: var(--font-display); font-weight: 700; font-size: 21px; color: var(--ink); margin: 0 0 6px; }
body[data-tema] .pa-prova-sub { font-size: 13.5px; color: var(--fg-2); margin: 0 0 20px; line-height: 1.5; }

body[data-tema] .pa-prova-form { display: flex; flex-direction: column; gap: 16px; }
body[data-tema] .fld-label { display: flex; flex-direction: column; gap: 7px; }
body[data-tema] .fld-label .lab { font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--fg-1); }
body[data-tema] .fld-wrap { position: relative; display: flex; align-items: center; }
body[data-tema] .fld-wrap > i { position: absolute; left: 13px; width: 17px; color: var(--fg-3); font-size: 15px; }

body[data-tema] .fld {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-body);
    font-size: 14.5px;
    color: var(--ink);
    padding: 12px 14px 12px 40px;
    border: 1px solid var(--border-1);
    border-radius: 9px;
    background: var(--white);
    outline: none;
    transition: border-color 150ms var(--easing-standard), box-shadow 150ms var(--easing-standard);
}

body[data-tema] .fld::placeholder { color: var(--fg-3); }
body[data-tema] .fld:focus { border-color: var(--preparacio-orange); box-shadow: 0 0 0 3px var(--preparacio-orange-tint); }

body[data-tema] .pa-prova-uses { background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 10px; padding: 14px 15px; }
body[data-tema] .pa-prova-uses .head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
body[data-tema] .pa-prova-uses .head i { color: var(--spin-blue-deep); }
body[data-tema] .pa-prova-uses .head span { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; color: var(--ink); }
body[data-tema] .pa-prova-uses ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; }
body[data-tema] .pa-prova-uses li { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--fg-2); line-height: 1.5; }
body[data-tema] .pa-prova-uses li i { color: var(--digcomp-a4-deep); font-size: 12px; margin-top: 2px; flex: none; }

body[data-tema] .pa-prova-consent { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
body[data-tema] .pa-prova-consent input { width: 16px; height: 16px; accent-color: var(--preparacio-orange); cursor: pointer; margin-top: 2px; flex: none; }
body[data-tema] .pa-prova-consent span { font-size: 12.5px; color: var(--fg-2); line-height: 1.5; }
body[data-tema] .pa-prova-consent strong { color: var(--ink); font-weight: 700; }
body[data-tema] .pa-prova-submit { width: 100%; text-align: center; margin-top: 2px; }

/* ----- Passa 3: el qüestionari, encaixat al domini de l'aula ----- */
/* ⚠️ El motor de qüestionaris hi entra amb `marcFix=1`, o sigui que es comporta com una
   pàgina sencera (`height: 100%`) i qui desplaça és la caixa de la pregunta: la caixa que
   l'allotja ha de tenir ALÇADA PRÒPIA. Sense ella un iframe es queda als 150 px del
   defecte i la prova surt per una escletxa.
   ⚠️ Per això `provaNivellQuestionari.php` porta `min-height: 520px` i les mides de
   l'iframe INLINE (#229669): aquest full és compartit i pot arribar al servidor
   endarrerit respecte de la pàgina. El que es decideix aquí és l'alçada exacta
   (`height`) i la decoració; el `min-height` de sota ha de valer el mateix que
   l'inline, i baixar-lo aquí —o a la media query— no tindria cap efecte. */
body[data-tema] .pa-provaq { padding: 28px 0 40px; }
body[data-tema] .pa-provaq .pa-prova-steps { max-width: 1080px; }

body[data-tema] .pa-provaq-marc {
    max-width: 1080px;
    height: calc(100vh - 260px);
    min-height: 520px;
    background: var(--white);
    border: 1px solid var(--border-1);
    border-radius: 16px;
    box-shadow: var(--shadow-2);
    overflow: hidden;
}

body[data-tema] .pa-provaq-marc iframe { display: block; width: 100%; height: 100%; border: 0; }
body[data-tema] .pa-provaq-buit { max-width: 560px; }

body[data-tema] .pa-provaq-buit .pa-prova-submit {
    display: inline-block;
    width: auto;
    padding-left: 22px;
    padding-right: 22px;
}

@media (max-width: 900px) {
    body[data-tema] .pa-prova-grid { grid-template-columns: 1fr; gap: 32px; }
    body[data-tema] .pa-plans { grid-template-columns: repeat(2, 1fr); }
    body[data-tema] .pa-tutors { grid-template-columns: repeat(2, 1fr); }
    body[data-tema] .pa-dubtes-grid { grid-template-columns: 1fr; }
    body[data-tema] .pa-dubtes-nav { position: static; }
    body[data-tema] .pa-dubtes-arees { grid-template-columns: 1fr; }
    body[data-tema] .pa-dubtes-pills { grid-template-columns: 1fr; }
    body[data-tema] .pa-step { grid-template-columns: 1fr; }
    body[data-tema] .pa-page-title { font-size: 36px; }
}

/* A mòbil la targeta ocupa tota l'amplada i el que hi mana és la fila de passes
   («1 Dades — 2 Verificació — 3 Prova»), que amb els filets i el coixí de 30 px
   demanava 387 px: 21 px més dels 342 que hi ha a 390 px. Es retiren els filets
   (decoratius) i la fila passa a embolcallar, de manera que una traducció més
   llarga baixa de línia en comptes de tornar a estirar la columna. */
@media (max-width: 560px) {
    body[data-tema] .pa-prova-card { padding: 24px 20px 22px; }
    body[data-tema] .pa-prova-steps { flex-wrap: wrap; gap: 8px 10px; }
    body[data-tema] .pa-prova-steps .divider { display: none; }
    body[data-tema] .pa-provaq-marc { height: calc(100vh - 200px); border-radius: 12px; }
}

/* ----- Preus ----- */
body[data-tema] .pa-tier {
    position: relative;
    background: var(--bg-1);
    border: 1px solid var(--border-1);
    border-radius: 14px;
    padding: 26px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: var(--shadow-1);
}

body[data-tema] .pa-tier.featured {
    border-color: var(--preparacio-orange);
    box-shadow: var(--shadow-2);
    transform: translateY(-6px);
}

body[data-tema] .pa-tier .badge-rec {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--preparacio-orange);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 4px 13px;
    border-radius: 999px;
    white-space: nowrap;
}

/* ----- FAQ ----- */
body[data-tema] .pa-faq-item {
    background: var(--bg-1);
    border: 1px solid var(--border-1);
    border-radius: 12px;
    overflow: hidden;
}

body[data-tema] .pa-faq-q {
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    color: var(--ink);
}

body[data-tema] .pa-faq-q i {
    color: var(--preparacio-orange-deep);
    transition: transform 200ms var(--easing-standard);
}

body[data-tema] .pa-faq-item.open .pa-faq-q i { transform: rotate(180deg); }

body[data-tema] .pa-faq-a {
    padding: 0 22px 20px;
    font-size: 14px;
    color: var(--fg-2);
    line-height: 1.6;
    animation: pa-fade 200ms var(--easing-standard);
}

body[data-tema] .pa-faq-a[hidden] { display: none; }

@media (max-width: 900px) {
    body[data-tema] .pa-hero-grid { grid-template-columns: 1fr; }
    body[data-tema] .pa-prova-grid { grid-template-columns: 1fr; gap: 28px; }
    body[data-tema] .pa-grid-4 { grid-template-columns: repeat(2, 1fr); }
    body[data-tema] .pa-grid-3 { grid-template-columns: 1fr; }
    body[data-tema] .pa-comps { grid-template-columns: 1fr; }
    body[data-tema] .pa-hero h1 { font-size: 40px; }
    body[data-tema] .pa-section h2 { font-size: 28px; }

    /* Les targetes flotants es reflueixen i deixen d'estar posicionades en absolut */
    body[data-tema] .pa-hero-art { height: auto; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
    body[data-tema] .pa-hero-art .drift { display: none; }
    body[data-tema] .pa-hero-art > div { position: static !important; transform: none !important; }
    body[data-tema] .pa-card-float { animation: none; }
}

/* El contingut de les seccions de la portada viu a la BD i ve del handoff amb
   els estils en línia: una graella que no encaixa en cap de les utilitàries
   (.pa-grid-2/3/4) porta les columnes al seu `style=`, que cap regla de classe
   no pot guanyar. La fila de 5 formadors no embolcallava mai i a 390 px treia
   207 px de scroll horitzontal a la pàgina sencera (només tres dels cinc es
   veien). L'`!important` és l'única manera d'entrar-hi, i l'atribut acota la
   regla al que porta columnes en línia: les utilitàries no s'hi toquen.
   Els trams es queden per sota de 768 px, que ja es veia bé. */
@media (max-width: 700px) {
    body[data-tema] .pa-grid[style*="grid-template-columns"] {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 520px) {
    body[data-tema] .pa-grid[style*="grid-template-columns"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ===================== Prova de nivell: funnel (passes dades + verificació) ===================== */
/* Pas completat a l'indicador */
body[data-tema] .pa-prova-steps .badge.done { background: var(--digcomp-a4); color: #fff; border-color: var(--digcomp-a4); }

/* Caixa d'errors */
body[data-tema] .pa-prova-errors { display: flex; flex-direction: column; gap: 6px; background: var(--digcomp-a5-tint); border: 1px solid var(--digcomp-a5); border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; }
body[data-tema] .pa-prova-errors[hidden] { display: none; }
body[data-tema] .pa-prova-errors span { font-size: 13px; color: var(--digcomp-a5-deep); line-height: 1.45; }

/* Botó en càrrega */
body[data-tema] .btn.is-loading { opacity: .65; pointer-events: none; }
body[data-tema] .btn.is-loading::after { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; display: inline-block; margin-left: 8px; vertical-align: -2px; animation: paSpin .7s linear infinite; }
@keyframes paSpin { to { transform: rotate(360deg); } }

/* Camp del codi OTP */
body[data-tema] .pa-prova-codi { letter-spacing: 8px; font-family: var(--font-mono); font-size: 20px; text-align: center; }
body[data-tema] .pa-prova-reenvia { font-size: 13px; color: var(--fg-3); margin: 16px 0 0; text-align: center; }
body[data-tema] .pa-prova-reenvia a { color: var(--preparacio-orange-deep); font-weight: 600; }

/* ===================== Pàgina d'inici de sessió (esLoginPagina) ===================== */
/* Dues columnes: panell de marca (degradat) + panell de formulari. A pàgina sencera:
   la vista es pinta sense navbar ni peu (vegeu index.php). */
body[data-tema] .pa-login {
    flex: 1;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    min-height: 100vh;
    background: var(--bg-2);
    color: var(--fg-1);
    font-family: var(--font-body);
}

/* --- Panell de marca --- */
body[data-tema] .pa-login-brand {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 44px 52px;
    background: linear-gradient(150deg, var(--preparacio-orange) 0%, var(--preparacio-orange-deep) 100%);
}

body[data-tema] .pa-login-mark {
    position: relative;
    z-index: 2;
    align-self: flex-start;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 23px;
    letter-spacing: -.03em;
    line-height: 1;
    text-decoration: none;
}

body[data-tema] .pa-login-mark:hover { text-decoration: none; }
body[data-tema] .pa-login-mark .b1 { color: #fff; }
body[data-tema] .pa-login-mark .b2 { color: rgba(255, 255, 255, .62); }
/* ⚠️ El logo es pinta SEMPRE en blanc: `getUrlLogoInvers()` serveix una sola imatge
   per a dos fons diferents —la capçalera fosca del simulacre, on el DS vol el wordmark
   taronja amb el `.cat` blanc, i aquest degradat de marca, on el vol tot blanc— i la
   variant on-dark hi deixava «preparacioACTIC» en #FF9600 sobre un fons que comença
   exactament en #FF9600 (contrast 1:1, només s'hi llegia el `.cat`). El filtre iguala
   qualsevol logo pujat a la variant del handoff i conserva l'alfa, així que també cobreix
   l'aula que només tingui el logo a color. */
body[data-tema] .pa-login-mark img {
    max-width: 260px;
    max-height: 44px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

/* Cercle decoratiu animat */
body[data-tema] .pa-login-drift {
    position: absolute;
    width: 420px;
    height: 420px;
    right: -120px;
    top: 38%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .22) 0%, transparent 70%);
    transform: translateY(-50%);
    animation: pa-drift 10s ease-in-out infinite;
}

body[data-tema] .pa-login-brand-body {
    position: relative;
    z-index: 2;
    margin-top: auto;
    max-width: 460px;
    color: #fff;
}

body[data-tema] .pa-login-brand-body .eyebrow {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
    margin: 0 0 16px;
}

body[data-tema] .pa-login-brand-body h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 40px;
    line-height: 1.08;
    letter-spacing: -.02em;
    color: #fff;
    margin: 0 0 16px;
}

body[data-tema] .pa-login-brand-body .lead,
body[data-tema] .pa-login-brand-body p {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .92);
    margin: 0 0 20px;
}

body[data-tema] .pa-login-brand-body a { color: #fff; text-decoration: underline; }

/* Xifres destacades (llista d'stats escrita des del panell) */
body[data-tema] .pa-login-stats { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 14px; }

body[data-tema] .pa-login-stats > * {
    border-left: 2px solid rgba(255, 255, 255, .35);
    padding-left: 14px;
}

body[data-tema] .pa-login-stats b {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 24px;
    line-height: 1;
    color: #fff;
}

body[data-tema] .pa-login-stats span { font-size: 12px; color: rgba(255, 255, 255, .82); }

/* --- Panell de formulari --- */
body[data-tema] .pa-login-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
}

body[data-tema] .pa-login-box { width: 100%; max-width: 392px; }
body[data-tema] .pa-login-head { margin-bottom: 30px; }

body[data-tema] .pa-login-head h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 28px;
    letter-spacing: -.015em;
    color: var(--ink);
    margin: 0 0 8px;
}

body[data-tema] .pa-login-head p { font-size: 14.5px; color: var(--fg-2); margin: 0; }
body[data-tema] .pa-login-head a { font-family: var(--font-display); font-weight: 700; color: var(--preparacio-orange-deep); }

body[data-tema] .pa-login-form { display: flex; flex-direction: column; gap: 17px; }
body[data-tema] .pa-login-field { display: flex; flex-direction: column; gap: 7px; margin: 0; }

body[data-tema] .pa-login-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    color: var(--fg-1);
}

body[data-tema] .pa-login-label a { font-family: var(--font-body); font-weight: 400; font-size: 12.5px; color: var(--fg-2); }
body[data-tema] .pa-login-control { position: relative; display: flex; align-items: center; }

body[data-tema] .pa-login-control > i {
    position: absolute;
    left: 13px;
    width: 17px;
    font-size: 15px;
    color: var(--fg-3);
    pointer-events: none;
}

body[data-tema] .pa-login-control input.form-control {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    font-family: var(--font-body);
    font-size: 14.5px;
    color: var(--ink);
    padding: 12px 42px 12px 40px;
    border: 1px solid var(--border-1);
    border-radius: var(--radius-3);
    background: var(--bg-1);
    transition: border-color 150ms var(--easing-standard), box-shadow 150ms var(--easing-standard);
}

body[data-tema] .pa-login-control input.form-control:focus {
    border-color: var(--spin-blue);
    box-shadow: 0 0 0 3px var(--spin-blue-soft);
    outline: none;
}

body[data-tema] .pa-login-pw {
    position: absolute;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    background: transparent;
    color: var(--fg-3);
    cursor: pointer;
    border-radius: var(--radius-1);
}

body[data-tema] .pa-login-pw:hover { color: var(--ink); }
body[data-tema] .pa-login-submit { width: 100%; justify-content: center; padding: 13px; font-size: 15px; margin-top: 3px; }

body[data-tema] .pa-login-error {
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--digcomp-a5-tint);
    border: 1px solid var(--digcomp-a5);
    border-radius: var(--radius-3);
    padding: 10px 13px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--fg-1);
}

body[data-tema] .pa-login-error i { color: var(--digcomp-a5-deep); flex: none; }

body[data-tema] .pa-login-sep { display: flex; align-items: center; gap: 14px; margin: 24px 0; }
body[data-tema] .pa-login-sep span { flex: 1; height: 1px; background: var(--border-1); }
body[data-tema] .pa-login-sep em { font-style: normal; font-size: 12px; color: var(--fg-3); }

body[data-tema] .pa-login-alt {
    display: inline-flex;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    margin-bottom: 10px;
    border: 1px solid var(--border-1);
    border-radius: var(--radius-3);
    background: var(--bg-1);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    color: var(--ink);
    transition: background 150ms var(--easing-standard), box-shadow 150ms var(--easing-standard);
}

body[data-tema] .pa-login-alt:hover { background: var(--bg-3); box-shadow: var(--shadow-1); text-decoration: none; color: var(--ink); }
body[data-tema] .pa-login-alt i { color: var(--spin-blue-deep); font-size: 16px; }

body[data-tema] .pa-login-legal {
    font-size: 12px;
    color: var(--fg-3);
    line-height: 1.6;
    text-align: center;
    margin: 26px 0 0;
}

body[data-tema] .pa-login-legal a { color: var(--fg-2); text-decoration: underline; }

@media (max-width: 860px) {
    /* min-height auto: amb flex:1 en columna, un min-height:0 deixaria encongir la
       graella per sota del contingut i el panell de marca quedaria retallat. */
    body[data-tema] .pa-login { grid-template-columns: 1fr; min-height: auto; }
    body[data-tema] .pa-login-brand { padding: 24px 24px 30px; }
    body[data-tema] .pa-login-brand-body { margin-top: 26px; max-width: none; }
    body[data-tema] .pa-login-brand-body h1 { font-size: 26px; }
    body[data-tema] .pa-login-brand-body .lead { font-size: 15px; }
    body[data-tema] .pa-login-drift { display: none; }
    body[data-tema] .pa-login-panel { padding: 34px 22px 48px; align-items: flex-start; }
}

/* Icona en pastilla del panell de marca */
body[data-tema] .pa-login-icona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 15px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 24px;
    margin-bottom: 22px;
}

body[data-tema] .pa-login-icona--blau {
    background: var(--spin-blue-soft);
    color: var(--spin-blue-deep);
    margin-bottom: 20px;
}

/* Recuperar contrasenya */
body[data-tema] .pa-login-torna {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12.5px;
    color: var(--fg-2);
    margin-bottom: 18px;
}

body[data-tema] .pa-login-torna:hover { color: var(--ink); text-decoration: none; }
body[data-tema] .pa-login-form .pa-login-error[hidden] { display: none; }

body[data-tema] .pa-login-nota {
    background: var(--bg-2);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-3);
    padding: 14px 16px;
    margin-bottom: 22px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--fg-2);
}

body[data-tema] .pa-login-box > [hidden] { display: none; }
body[data-tema] a.pa-login-submit { display: block; text-align: center; }

/* ===================== Àrea privada: chrome (barra lateral + contingut) ===================== */
body[data-tema] .pa-aula {
    display: flex;
    align-items: stretch;
    flex: 1;
    min-height: 100vh;
    background: var(--bg-2);
    color: var(--fg-1);
    font-family: var(--font-body);
}

body[data-tema] .pa-aula-side {
    width: 252px;
    flex-shrink: 0;
    background: var(--bg-1);
    border-right: 1px solid var(--border-1);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

body[data-tema] .pa-aula-side__cap {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 16px;
    border-bottom: 1px solid var(--border-1);
    flex-shrink: 0;
    overflow: hidden;
}

/* Embolcall del que es plega a mòbil (navegació + targetes del peu). A escriptori
   és transparent: `flex: 1` en columna perquè el `margin-top: auto` del peu es
   segueixi mesurant contra tota l'alçada de la barra i el peu quedi a baix. */
body[data-tema] .pa-aula-side__plegable {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

/* Botó del menú: només a mòbil. Aquí amagat perquè a escriptori la barra sempre és
   visible i un botó que no plega res només confondria. */
body[data-tema] .pa-aula-side__toggle {
    display: none;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--border-1);
    border-radius: var(--radius-2);
    background: var(--bg-2);
    color: var(--fg-1);
    font-size: 16px;
    cursor: pointer;
}

body[data-tema] .pa-aula-side__toggle:hover { background: var(--bg-3, var(--bg-2)); }

body[data-tema] .pa-aula-mark {
    display: flex;
    align-items: center;
    max-width: 100%;
    min-width: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -.03em;
    line-height: 1;
}

body[data-tema] .pa-aula-mark:hover { text-decoration: none; }
body[data-tema] .pa-aula-mark .b1 { color: var(--preparacio-orange); }
body[data-tema] .pa-aula-mark .b2 { color: var(--ink); }
body[data-tema] .pa-aula-mark img {
    max-width: 100%;
    max-height: 38px;
    width: auto;
    height: auto;
    object-fit: contain;
}

body[data-tema] .pa-aula-nav { padding: 18px 12px; display: flex; flex-direction: column; gap: 2px; }

body[data-tema] .pa-aula-nav__titol {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--fg-mute);
    padding: 0 10px 8px;
}

body[data-tema] .pa-aula-nav__titol--sep { padding-top: 12px; }

body[data-tema] .pa-aula-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 11px;
    border-radius: 8px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    color: var(--fg-2);
}

body[data-tema] .pa-aula-item i { width: 18px; text-align: center; font-size: 15px; }
body[data-tema] .pa-aula-item:hover { background: var(--bg-3); color: var(--ink); text-decoration: none; }

body[data-tema] .pa-aula-item.active {
    font-weight: 700;
    background: var(--preparacio-orange-tint);
    color: var(--preparacio-orange-deep);
}

body[data-tema] .pa-aula-badge {
    margin-left: auto;
    background: var(--preparacio-orange);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: var(--radius-pill);
}

body[data-tema] .pa-aula-side__peu { margin-top: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }

body[data-tema] .pa-aula-progres {
    background: var(--spin-blue-tint);
    border: 1px solid var(--spin-blue-soft);
    border-radius: var(--radius-3);
    padding: 14px;
}

body[data-tema] .pa-aula-progres__t { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--spin-blue-deep); }
body[data-tema] .pa-aula-progres__v { font-size: 12px; color: var(--fg-2); margin-top: 4px; }

/* Canvi de perfil (només si la persona en té més d'un): un botó per perfil,
   amb l'actiu pintat com l'ítem actiu del menú. */
body[data-tema] .pa-aula-perfils { display: flex; flex-direction: column; gap: 4px; }

body[data-tema] .pa-aula-perfils__t {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fg-3);
    padding: 0 6px 2px;
}

body[data-tema] .pa-aula-perfil {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border: 1px solid var(--border-1);
    border-radius: 8px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12.5px;
    color: var(--fg-2);
}

body[data-tema] .pa-aula-perfil i { width: 16px; text-align: center; font-size: 13px; }
body[data-tema] .pa-aula-perfil:hover { background: var(--bg-3); color: var(--ink); text-decoration: none; }

body[data-tema] .pa-aula-perfil.active {
    font-weight: 700;
    background: var(--preparacio-orange-tint);
    border-color: var(--preparacio-orange);
    color: var(--preparacio-orange-deep);
}

body[data-tema] .pa-aula-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 6px 2px;
    border-top: 1px solid var(--border-1);
}

body[data-tema] .pa-aula-user__nom {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body[data-tema] .pa-aula-user a { font-size: 11px; color: var(--fg-3); }
body[data-tema] .pa-aula-main { flex: 1; min-width: 0; }

body[data-tema] .pa-aula-cap {
    min-height: 70px;
    background: var(--bg-1);
    border-bottom: 1px solid var(--border-1);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 32px;
    position: sticky;
    top: 0;
    z-index: 20;
}

body[data-tema] .pa-aula-cap h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    margin: 0;
    color: var(--ink);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body[data-tema] .pa-aula-cap__sep { width: 1px; height: 22px; background: var(--border-1); flex: none; }
body[data-tema] .pa-aula-torna {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    color: var(--fg-2);
    white-space: nowrap;
}

body[data-tema] .pa-aula-torna:hover { color: var(--ink); text-decoration: none; }
body[data-tema] .pa-aula-cap__prog { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
body[data-tema] .pa-aula-cap__prog > span:first-child { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); }
body[data-tema] .pa-aula-cap__prog .pa-bar { width: 120px; margin: 0; }

body[data-tema] .pa-aula-cos {
    padding: 28px 32px 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 1320px;
}

/* Barra de progrés genèrica */
body[data-tema] .pa-aula .pa-bar {
    display: block;
    height: 6px;
    background: var(--bg-3);
    border-radius: var(--radius-pill);
    overflow: hidden;
    margin-top: 8px;
}

body[data-tema] .pa-aula .pa-bar > span { display: block; height: 100%; background: var(--preparacio-orange); }
body[data-tema] .pa-aula .pa-bar--a1 > span { background: var(--digcomp-a1); }
body[data-tema] .pa-aula .pa-bar--a2 > span { background: var(--digcomp-a2); }
body[data-tema] .pa-aula .pa-bar--a3 > span { background: var(--digcomp-a3); }
body[data-tema] .pa-aula .pa-bar--a4 > span { background: var(--digcomp-a4); }
body[data-tema] .pa-aula .pa-bar--a5 > span { background: var(--digcomp-a5); }

/* Salutació */
body[data-tema] .pa-aula .pa-benvinguda {
    background: linear-gradient(120deg, var(--ink) 0%, #2b2b2b 100%);
    border-radius: var(--radius-4);
    padding: 30px 32px;
    display: flex;
    align-items: center;
    gap: 32px;
    color: #fff;
    overflow: hidden;
    position: relative;
}

body[data-tema] .pa-aula .pa-benvinguda__bola {
    position: absolute;
    right: -60px;
    top: -80px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: color-mix(in oklab, var(--preparacio-orange) 16%, transparent);
}

body[data-tema] .pa-aula .pa-benvinguda__txt { flex: 1; min-width: 0; position: relative; }

body[data-tema] .pa-aula .pa-benvinguda .eyebrow {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--preparacio-orange);
    margin: 0 0 10px;
}

body[data-tema] .pa-aula .pa-benvinguda h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 30px;
    margin: 0 0 8px;
    letter-spacing: -.015em;
    color: #fff;
}

body[data-tema] .pa-aula .pa-benvinguda .lead { font-size: 15px; color: rgba(255, 255, 255, .72); margin: 0; line-height: 1.55; max-width: 520px; }

body[data-tema] .pa-aula .pa-benvinguda__card {
    position: relative;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 12px;
    padding: 18px 20px;
    min-width: 250px;
    max-width: 290px;
    flex: none;
}

body[data-tema] .pa-aula .pa-benvinguda__card-t { font-size: 12px; color: rgba(255, 255, 255, .6); margin-bottom: 4px; }
body[data-tema] .pa-aula .pa-benvinguda__card-n { font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1.3; margin-bottom: 12px; }
body[data-tema] .pa-aula .pa-benvinguda__card .btn { width: 100%; justify-content: center; padding: 10px 14px; font-size: 13.5px; }

/* Avís de respostes de la tutoria sense llegir (escriptori).
   ⚠️ Només es pinta quan n'hi ha: substitueix la targeta «Activitat recent», que
   ocupava el mateix espai per dir que no hi havia res. Mides en px: les vistes web
   carreguen Bootstrap 3, que fixa `html { font-size: 10px }`. */
body[data-tema] .pa-aula .pa-msgs {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--spin-blue-tint);
    border: 1px solid var(--spin-blue-soft);
    border-radius: 12px;
    padding: 14px 16px;
}

body[data-tema] .pa-aula .pa-msgs__i {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--spin-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

body[data-tema] .pa-aula .pa-msgs__d { flex: 1; min-width: 0; }

body[data-tema] .pa-aula .pa-msgs__d > b {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    color: var(--spin-blue-deep);
    margin-bottom: 6px;
}

body[data-tema] .pa-aula .pa-msgs__f {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 3px 0;
    font-size: 13px;
    color: var(--fg-2);
}

body[data-tema] .pa-aula .pa-msgs__f:hover { color: var(--spin-blue-deep); text-decoration: none; }
body[data-tema] .pa-aula .pa-msgs__f > span { font-weight: 600; min-width: 0; }
body[data-tema] .pa-aula .pa-msgs__f > em { font-style: normal; font-size: 12px; color: var(--fg-3); }

body[data-tema] .pa-aula .pa-msgs__mes {
    display: inline-block;
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--spin-blue-deep);
}

@media (max-width: 620px) {
    body[data-tema] .pa-aula .pa-msgs__f { flex-direction: column; gap: 0; }
}

/* Àrees de competència (etiquetes d'acció marcades Agrupació + LMS + Web).
   El color de cada àrea arriba com a `--pa-band` en línia des de l'etiqueta. */
/* Sempre en UNA fila i totes visibles, siguin les que siguin: les columnes es
   reparteixen l'espai (`minmax(0, 1fr)`) i el contingut s'encongeix amb elles
   (vegeu els dos escalons de sota); mai es trenquen en dues files ni cal desplaçar. */
body[data-tema] .pa-aula .pa-arees {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 14px;
}

body[data-tema] .pa-aula .pa-area {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    background: var(--bg-1);
    border: 1px solid var(--border-1);
    border-radius: 12px;
    padding: 16px 15px;
    box-shadow: var(--shadow-1);
    color: inherit;
    transition: box-shadow 200ms var(--easing-standard), transform 200ms var(--easing-standard);
}

body[data-tema] .pa-aula a.pa-area:hover {
    box-shadow: var(--shadow-2);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}

body[data-tema] .pa-aula .pa-area__cap { display: flex; align-items: center; gap: 9px; min-width: 0; }

body[data-tema] .pa-aula .pa-area__c {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--pa-band, var(--preparacio-orange));
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* El nom pot ser llarg i la columna estreta: es parteix abans que estirar la caixa. */
body[data-tema] .pa-aula .pa-area__n {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    color: var(--ink);
    line-height: 1.25;
    min-width: 0;
    overflow-wrap: break-word;
}

/* `margin-top: auto`: amb noms d'una, dues o tres línies, la xifra i la barra queden
   igualment alineades a totes les targetes de la fila. */
body[data-tema] .pa-aula .pa-area__v { display: flex; align-items: baseline; gap: 7px; margin-top: auto; }
body[data-tema] .pa-aula .pa-area__v b { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--ink); line-height: 1; }
body[data-tema] .pa-aula .pa-area__v b span { font-size: 15px; color: var(--fg-3); }
body[data-tema] .pa-aula .pa-area__v em { font-family: var(--font-mono); font-style: normal; font-size: 11px; color: var(--fg-3); margin-left: auto; }
body[data-tema] .pa-aula .pa-area__p { font-size: 11.5px; color: var(--fg-3); }
body[data-tema] .pa-aula .pa-bar--band > span { background: var(--pa-band, var(--preparacio-orange)); }

/* Escalons perquè les àrees càpiguen totes en una fila també amb la finestra petita.
   Amb la columna estreta, les sigles passen a SOBRE del nom: compartint fila, un nom
   com «Formació ocupacional» es partia pel mig d'una paraula. */
@media (max-width: 1200px) {
    body[data-tema] .pa-aula .pa-area { padding: 13px 12px; gap: 10px; }
    body[data-tema] .pa-aula .pa-area__cap { flex-direction: column; align-items: flex-start; gap: 7px; }
    body[data-tema] .pa-aula .pa-area__c { width: 28px; height: 28px; font-size: 11.5px; }
    body[data-tema] .pa-aula .pa-area__n { font-size: 12px; }
    body[data-tema] .pa-aula .pa-area__v b { font-size: 22px; }
    body[data-tema] .pa-aula .pa-area__v b span { font-size: 13px; }
}

/* Encara més estret (mòbil, on la barra lateral ja és una capçalera): tot centrat i
   sense el peu, que és el que permet que cinc àrees hi segueixin cabent. */
@media (max-width: 760px) {
    body[data-tema] .pa-aula .pa-arees { gap: 8px; }
    body[data-tema] .pa-aula .pa-area { padding: 10px 7px; gap: 7px; text-align: center; }
    body[data-tema] .pa-aula .pa-area__cap { align-items: center; gap: 5px; }
    body[data-tema] .pa-aula .pa-area__n { font-size: 11px; }
    body[data-tema] .pa-aula .pa-area__v { flex-direction: column; align-items: center; gap: 1px; }
    body[data-tema] .pa-aula .pa-area__v b { font-size: 18px; }
    body[data-tema] .pa-aula .pa-area__v em { margin-left: 0; }
    body[data-tema] .pa-aula .pa-area__p { display: none; }
}

/* Indicadors */
body[data-tema] .pa-aula .pa-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

body[data-tema] .pa-aula .pa-kpi {
    background: var(--bg-1);
    border: 1px solid var(--border-1);
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: var(--shadow-1);
}

body[data-tema] .pa-aula .pa-kpi__t { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-3); margin-bottom: 10px; }
body[data-tema] .pa-aula .pa-kpi__v { font-family: var(--font-display); font-weight: 700; font-size: 28px; color: var(--ink); line-height: 1; }
body[data-tema] .pa-aula .pa-kpi__v span { font-size: 16px; color: var(--fg-3); }
body[data-tema] .pa-aula .pa-kpi__p { font-size: 12px; color: var(--fg-3); margin-top: 12px; }

/* Targetes */
body[data-tema] .pa-aula-col { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

body[data-tema] .pa-aula .pa-card {
    background: var(--bg-1);
    border: 1px solid var(--border-1);
    border-radius: 14px;
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

body[data-tema] .pa-aula .pa-card--p { padding: 20px 22px; }
body[data-tema] .pa-aula .pa-card__cap { display: flex; align-items: center; gap: 16px; padding: 20px 24px 16px; }
body[data-tema] .pa-aula .pa-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 16px; margin: 0; color: var(--ink); }
body[data-tema] .pa-aula .pa-card__cap p { font-size: 13px; color: var(--fg-3); margin: 3px 0 0; }
body[data-tema] .pa-aula .pa-card--p h3 { margin-bottom: 16px; }
body[data-tema] .pa-aula .pa-card__acc { margin-left: auto; font-family: var(--font-display); font-weight: 700; font-size: 12.5px; color: var(--preparacio-orange-deep); }

/* Interruptor «Només el que em falta» de la capçalera de l'itinerari. */
body[data-tema] .pa-aula .pa-toggle {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: transparent;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-pill);
    padding: 7px 13px;
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12.5px;
    color: var(--fg-2);
    white-space: nowrap;
}

body[data-tema] .pa-aula .pa-toggle__t {
    width: 30px;
    height: 17px;
    border-radius: var(--radius-pill);
    background: var(--border-2);
    position: relative;
    transition: background 160ms var(--easing-standard);
    flex: none;
}

body[data-tema] .pa-aula .pa-toggle__t > span {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    transition: left 160ms var(--easing-standard);
}

body[data-tema] .pa-aula .pa-toggle[aria-pressed="true"] { border-color: var(--preparacio-orange); color: var(--preparacio-orange-deep); }
body[data-tema] .pa-aula .pa-toggle[aria-pressed="true"] .pa-toggle__t { background: var(--preparacio-orange); }
body[data-tema] .pa-aula .pa-toggle[aria-pressed="true"] .pa-toggle__t > span { left: 15px; }
body[data-tema] .pa-aula .pa-buit { padding: 18px 24px; font-size: 13.5px; color: var(--fg-3); }

/* Itinerari */
body[data-tema] .pa-aula .pa-itinerari__f {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-1);
    color: inherit;
}

body[data-tema] .pa-aula .pa-itinerari__f:hover { background: var(--bg-2); text-decoration: none; color: inherit; }
/* `display: flex` guanyaria l'`[hidden]` del navegador quan el filtre amaga la fila. */
body[data-tema] .pa-aula .pa-itinerari__f[hidden] { display: none; }

body[data-tema] .pa-aula .pa-itinerari__i {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

body[data-tema] .pa-aula .pa-area-a1 { background: var(--digcomp-a1); }
body[data-tema] .pa-aula .pa-area-a2 { background: var(--digcomp-a2); }
body[data-tema] .pa-aula .pa-area-a3 { background: var(--digcomp-a3); }
body[data-tema] .pa-aula .pa-area-a4 { background: var(--digcomp-a4); }
body[data-tema] .pa-aula .pa-area-a5 { background: var(--digcomp-a5); }
/* Àrea amb color propi: arriba com a `--pa-band` en línia des de l'etiqueta,
   igual que les targetes d'àrea de l'escriptori. */
body[data-tema] .pa-aula .pa-area-band { background: var(--pa-band, var(--digcomp-a1)); }

body[data-tema] .pa-aula .pa-itinerari__d { flex: 1; min-width: 0; }
body[data-tema] .pa-aula .pa-itinerari__n { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
body[data-tema] .pa-aula .pa-itinerari__n b { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-tema] .pa-aula .pa-itinerari__n em { font-family: var(--font-mono); font-style: normal; font-size: 11.5px; color: var(--fg-3); white-space: nowrap; }

body[data-tema] .pa-aula .pa-xip {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    padding: 5px 11px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    flex: none;
}

body[data-tema] .pa-aula .pa-xip--fet { background: var(--digcomp-a4-tint); color: var(--digcomp-a4-deep); }
body[data-tema] .pa-aula .pa-xip--curs { background: var(--preparacio-orange-tint); color: var(--preparacio-orange-deep); }
body[data-tema] .pa-aula .pa-xip--pendent { background: var(--bg-3); color: var(--fg-3); }
/* «Pendent» és una feina teva que encara no has fet; «No disponible» no ho és, i per
   això no comparteix el to del xip pendent: va a la vora, sense fons. */
body[data-tema] .pa-aula .pa-xip--blocat { background: transparent; color: var(--fg-3); box-shadow: inset 0 0 0 1px var(--border-2); }


/* Xip de nivell de la capçalera (Simulacres): el nom del pla és text lliure i pot ser
   llarg («N3 · Avançat · Transformador»), i el `flex: none` de `.pa-xip` el feia
   desbordar la pantalla en mòbil. Aquí encongeix i s'escapça, com el títol.
   ⚠️ Va DESPRÉS de `.pa-xip`: empaten en especificitat i mana l'ordre. */
body[data-tema] .pa-aula-cap .pa-aula-cap__nivell {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Avatars */
body[data-tema] .pa-aula .pa-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--preparacio-orange);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

body[data-tema] .pa-aula .pa-avatar--blau { background: var(--spin-blue); }
body[data-tema] .pa-aula .pa-avatar--verd { background: var(--digcomp-a4); }
body[data-tema] .pa-aula .pa-avatar--gran { width: 46px; height: 46px; font-size: 16px; }

body[data-tema] .pa-aula .pa-tutor__cap { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
body[data-tema] .pa-aula .pa-tutor__cap b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 14.5px; color: var(--ink); }
body[data-tema] .pa-aula .pa-tutor__cap em { display: block; font-style: normal; font-size: 12px; color: var(--fg-3); }
body[data-tema] .pa-aula .pa-tutor .btn { width: 100%; justify-content: center; padding: 10px 14px; font-size: 13px; }

/* Al peu de l'escriptori la targeta va a tota l'amplada: en columna el botó
   ocupa tota la caixa, i estirat de vora a vora quedava desproporcionat.
   ⚠️ `flex-direction` i `text-align` explícits: `.pa-card` del tema públic ja és
   flex en COLUMNA i `.pa-tutor` (targetes de la portada) centra el text, i sense
   sobreescriure'ls la fila queda apilada i centrada al mig de la caixa. */
body[data-tema] .pa-aula .pa-tutor--fila {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    text-align: left;
}
body[data-tema] .pa-aula .pa-tutor--fila .pa-tutor__cap { margin-bottom: 0; }
body[data-tema] .pa-aula .pa-tutor--fila .btn { width: auto; }

/* Curs */
body[data-tema] .pa-aula .pa-curs-cols { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 24px; align-items: start; }
body[data-tema] .pa-aula .pa-curs-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

body[data-tema] .pa-aula .pa-curs-hero {
    display: flex;
    gap: 22px;
    align-items: flex-start;
    background: var(--bg-1);
    border: 1px solid var(--border-1);
    border-radius: 14px;
    box-shadow: var(--shadow-1);
    padding: 22px 24px;
}

body[data-tema] .pa-aula .pa-curs-hero img { width: 130px; height: 90px; object-fit: cover; border-radius: 10px; flex: none; }
body[data-tema] .pa-aula .pa-curs-hero h2 { font-family: var(--font-display); font-weight: 700; font-size: 22px; margin: 0 0 8px; color: var(--ink); letter-spacing: -.015em; }
body[data-tema] .pa-aula .pa-curs-hero p { font-size: 14px; color: var(--fg-2); line-height: 1.6; margin: 0 0 12px; }
body[data-tema] .pa-aula .pa-curs-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12.5px; color: var(--fg-3); }
body[data-tema] .pa-aula .pa-curs-meta i { margin-right: 6px; color: var(--preparacio-orange-deep); }
body[data-tema] .pa-aula .pa-curs-contingut { padding: 18px 20px; }
body[data-tema] .pa-aula .pa-modul { display: flex; gap: 12px; align-items: center; padding: 10px 22px; border-top: 1px solid var(--border-1); }
body[data-tema] .pa-aula .pa-modul__d { flex: 1; min-width: 0; }
body[data-tema] .pa-aula .pa-modul__d b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--ink); line-height: 1.35; }

body[data-tema] .pa-aula .pa-modul__n {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bg-3);
    color: var(--fg-2);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

body[data-tema] .pa-aula .pa-modul__n.fet { background: var(--digcomp-a4); color: #fff; }

@media (max-width: 1100px) {
    body[data-tema] .pa-aula .pa-curs-cols { grid-template-columns: 1fr; }
    body[data-tema] .pa-aula .pa-kpis { grid-template-columns: repeat(2, 1fr); }
    /* Amb el xip de l'àrea a la capçalera, el títol es quedava sense espai: el
       progrés baixa a una segona línia en comptes d'escapçar-lo. */
    body[data-tema] .pa-aula-cap { flex-wrap: wrap; }
    body[data-tema] .pa-aula-cap h1 { flex: 1 1 auto; }
}

@media (max-width: 860px) {
    body[data-tema] .pa-aula { flex-direction: column; }
    body[data-tema] .pa-aula-side { width: auto; height: auto; position: static; border-right: 0; border-bottom: 1px solid var(--border-1); }

    /* La barra es queda en la seva franja de marca (70px) amb el botó del menú, i
       tota la resta es plega. Abans es desplegava sencera per damunt del contingut:
       a 390px eren uns 450px de navegació i targetes d'estat abans d'arribar al
       curs, que és el que la persona ve a fer.
       ⚠️ `display: none` i no `height: 0`/`visibility`: el que hi ha dins són
       enllaços, i han de sortir del recorregut del tabulador i dels lectors de
       pantalla mentre el menú està tancat, no només de la vista. */
    body[data-tema] .pa-aula-side__toggle { display: inline-flex; }
    body[data-tema] .pa-aula-side__plegable { display: none; }
    body[data-tema] .pa-aula-side.is-obert .pa-aula-side__plegable { display: flex; }

    body[data-tema] .pa-aula-nav { flex-direction: row; flex-wrap: wrap; }
    body[data-tema] .pa-aula-nav__titol { display: none; }
    /* El nom del pla és text lliure («N3 · Avançat · Transformador»): sense poder
       encongir ni saltar de línia, les targetes del peu treien la del compte fora de
       la pantalla. */
    body[data-tema] .pa-aula-side__peu { flex-direction: row; align-items: center; flex-wrap: wrap; }
    body[data-tema] .pa-aula-progres { flex: 1 1 150px; min-width: 0; }
    body[data-tema] .pa-aula-perfils { flex-direction: row; flex-wrap: wrap; align-items: center; }
    body[data-tema] .pa-aula-perfils__t { display: none; }
    body[data-tema] .pa-aula-cos { padding: 20px 16px 32px; }
    body[data-tema] .pa-aula-cap { padding: 12px 16px; flex-wrap: wrap; }
    body[data-tema] .pa-aula .pa-benvinguda { flex-direction: column; align-items: stretch; padding: 22px; }
    body[data-tema] .pa-aula .pa-benvinguda__card { max-width: none; }
    body[data-tema] .pa-aula .pa-kpis { grid-template-columns: 1fr; }
    body[data-tema] .pa-aula .pa-curs-hero { flex-direction: column; }
}

/* Botó secundari dins de l'àrea privada: el de Bootstrap hi surt fosc. */
body[data-tema] .pa-aula .btn-secondary {
    background: var(--bg-3);
    border-color: var(--border-2);
    color: var(--fg-1);
    font-family: var(--font-display);
    font-weight: 700;
}

body[data-tema] .pa-aula .btn-secondary:hover {
    background: var(--preparacio-orange-tint);
    border-color: var(--preparacio-orange);
    color: var(--preparacio-orange-deep);
}

/* ===================== Àrea privada: tutoria, simulacres i compte ===================== */
body[data-tema] .pa-aula .pa-aula-cap__btn { margin-left: auto; padding: 8px 16px; font-size: 13.5px; flex: none; }
body[data-tema] .pa-aula .pa-kpis--3 { grid-template-columns: repeat(3, 1fr); }

/* Capçalera de tutoria / compte */
/* flex-direction explícit: `.pa-card` del tema públic ja és flex en columna. */
body[data-tema] .pa-aula .pa-tutoria-cap,
body[data-tema] .pa-aula .pa-compte-cap { display: flex; flex-direction: row; align-items: center; gap: 14px; flex-wrap: wrap; }
body[data-tema] .pa-aula .pa-tutoria-cap b,
body[data-tema] .pa-aula .pa-compte-cap b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); }
body[data-tema] .pa-aula .pa-tutoria-cap em,
body[data-tema] .pa-aula .pa-compte-cap em { display: block; font-style: normal; font-size: 12.5px; color: var(--fg-3); }
body[data-tema] .pa-aula .pa-tutoria-cap__x,
body[data-tema] .pa-aula .pa-compte-cap__x { margin-left: auto; display: flex; gap: 8px; }

/* Tutoria: llista de consultes + conversa */
body[data-tema] .pa-aula .pa-tutoria { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 22px; align-items: start; }
body[data-tema] .pa-aula .pa-tutoria-llista { display: flex; flex-direction: column; max-height: 620px; }

body[data-tema] .pa-aula .pa-tutoria-filtres {
    display: flex;
    gap: 6px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-1);
    flex: none;
}

body[data-tema] .pa-aula .pa-tutoria-filtres button {
    border: 1px solid var(--border-2);
    background: transparent;
    border-radius: var(--radius-pill);
    padding: 5px 13px;
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12.5px;
    color: var(--fg-2);
}

body[data-tema] .pa-aula .pa-tutoria-filtres button.active {
    background: var(--preparacio-orange-tint);
    border-color: var(--preparacio-orange);
    color: var(--preparacio-orange-deep);
}

body[data-tema] .pa-aula .pa-tutoria-fils { overflow: auto; }

body[data-tema] .pa-aula .pa-tutoria-fil {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    border-bottom: 1px solid var(--border-1);
    background: transparent;
    padding: 13px 16px;
    cursor: pointer;
}

body[data-tema] .pa-aula .pa-tutoria-fil:hover { background: var(--bg-2); }
body[data-tema] .pa-aula .pa-tutoria-fil.active { background: var(--preparacio-orange-tint); }
body[data-tema] .pa-aula .pa-tutoria-fil[hidden] { display: none; }

body[data-tema] .pa-aula .pa-tutoria-fil__c {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fg-3);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body[data-tema] .pa-aula .pa-tutoria-fil__t { display: block; font-size: 13.5px; line-height: 1.45; color: var(--fg-1); }
body[data-tema] .pa-aula .pa-tutoria-fil__p { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
body[data-tema] .pa-aula .pa-tutoria-fil__p em { font-style: normal; font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); }

body[data-tema] .pa-aula .pa-punt {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--preparacio-orange);
    margin-left: auto;
    flex: none;
}

body[data-tema] .pa-aula .pa-tutoria-conversa { padding: 20px 22px; min-height: 320px; }
body[data-tema] .pa-aula .pa-tutoria-panel[hidden] { display: none; }

body[data-tema] .pa-aula .pa-tutoria-panel__cap {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--border-1);
}

body[data-tema] .pa-aula .pa-tutoria-panel__cap b { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); }
body[data-tema] .pa-aula .pa-tutoria-panel__cap em { font-style: normal; font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-3); margin-left: auto; }

body[data-tema] .pa-aula .pa-msg { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
body[data-tema] .pa-aula .pa-msg--jo { justify-content: flex-end; }

body[data-tema] .pa-aula .pa-msg__b {
    max-width: 78%;
    background: var(--bg-3);
    border-radius: 12px;
    padding: 13px 16px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--fg-1);
}

body[data-tema] .pa-aula .pa-msg--jo .pa-msg__b { background: var(--preparacio-orange-tint); color: var(--ink); }
body[data-tema] .pa-aula .pa-msg--tutor .pa-msg__b { background: var(--spin-blue-tint); border: 1px solid var(--spin-blue-soft); }
body[data-tema] .pa-aula .pa-msg__b p:last-child { margin-bottom: 0; }

body[data-tema] .pa-aula .pa-tutoria-adjunt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--spin-blue-deep);
    margin: 0 0 16px 46px;
}

body[data-tema] .pa-aula .pa-tutoria-espera {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-2);
    border: 1px dashed var(--border-2);
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 13px;
    color: var(--fg-2);
}

/* Conversa: el fil creix i és ell qui es desplaça, perquè la caixa d'escriure
   quedi sempre a la vista al peu del panell. */
body[data-tema] .pa-aula .pa-tutoria-missatges { max-height: 440px; overflow-y: auto; }

body[data-tema] .pa-aula .pa-tutoria-panel__t {
    font-size: 13px;
    color: var(--fg-2);
    border-left: 1px solid var(--border-1);
    padding-left: 12px;
}

body[data-tema] .pa-aula .pa-msg__h {
    display: block;
    margin-top: 6px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--fg-3);
    text-align: right;
}

body[data-tema] .pa-aula .pa-tutoria-nou {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border-1);
}

body[data-tema] .pa-aula .pa-tutoria-nou__t {
    flex: 1 1 220px;
    min-width: 0;
    resize: vertical;
    border: 1px solid var(--border-1);
    border-radius: 10px;
    background: var(--bg-1);
    color: var(--fg-1);
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.5;
}

body[data-tema] .pa-aula .pa-tutoria-nou__t:focus {
    outline: none;
    border-color: var(--spin-blue-soft);
}

body[data-tema] .pa-aula .pa-tutoria-nou__e {
    flex: 1 0 100%;
    margin: 0;
    font-size: 13px;
    color: var(--danger, #b3261e);
}

body[data-tema] .pa-aula .pa-tutoria-nou__e[hidden] { display: none; }

/* Pestanyes del compte */
body[data-tema] .pa-aula .pa-tabs { display: flex; gap: 6px; flex-wrap: wrap; }

body[data-tema] .pa-aula .pa-tabs button {
    border: 1px solid var(--border-1);
    background: var(--bg-1);
    border-radius: var(--radius-pill);
    padding: 8px 16px;
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13.5px;
    color: var(--fg-2);
}

body[data-tema] .pa-aula .pa-tabs button.active {
    background: var(--preparacio-orange);
    border-color: var(--preparacio-orange);
    color: #fff;
    font-weight: 700;
}

body[data-tema] .pa-aula .pa-tabs__n { font-family: var(--font-mono); font-size: 11px; opacity: .75; margin-left: 4px; }
body[data-tema] .pa-aula [data-pa-tab-panel][hidden] { display: none; }

/* Documents del compte */
body[data-tema] .pa-aula .pa-doc {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--border-1);
    border-radius: 10px;
    margin-bottom: 10px;
    color: inherit;
}

body[data-tema] .pa-aula .pa-doc:hover { background: var(--bg-2); border-color: var(--border-2); text-decoration: none; color: inherit; }

body[data-tema] .pa-aula .pa-doc__i {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: var(--spin-blue-tint);
    color: var(--spin-blue-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

body[data-tema] .pa-aula .pa-doc__d { flex: 1; min-width: 0; }
body[data-tema] .pa-aula .pa-doc__d b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink); }
body[data-tema] .pa-aula .pa-doc__d em { display: block; font-style: normal; font-size: 12px; color: var(--fg-3); }

/* Proves (simulacres i qüestionaris) */
body[data-tema] .pa-aula .pa-prova {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 24px;
    border-top: 1px solid var(--border-1);
}

body[data-tema] .pa-aula .pa-prova__i {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--bg-3);
    color: var(--fg-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

body[data-tema] .pa-aula .pa-prova__i.fet { background: var(--digcomp-a4-tint); color: var(--digcomp-a4-deep); }
body[data-tema] .pa-aula .pa-prova__d { flex: 1; min-width: 0; }
body[data-tema] .pa-aula .pa-prova__d b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink); }
body[data-tema] .pa-aula .pa-prova__d em { display: block; font-style: normal; font-size: 12.5px; color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-tema] .pa-aula .pa-prova__n { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--ink); flex: none; }
body[data-tema] .pa-aula .pa-prova__n small { font-size: 12px; color: var(--fg-3); }
body[data-tema] .pa-aula .pa-prova__b { flex: none; padding: 8px 14px; font-size: 13px; }

@media (max-width: 1100px) {
    body[data-tema] .pa-aula .pa-tutoria { grid-template-columns: 1fr; }
    body[data-tema] .pa-aula .pa-tutoria-llista { max-height: 380px; }
    body[data-tema] .pa-aula .pa-kpis--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
    body[data-tema] .pa-aula .pa-kpis--3 { grid-template-columns: 1fr; }
    body[data-tema] .pa-aula .pa-prova { flex-wrap: wrap; padding: 14px 16px; }
    body[data-tema] .pa-aula .pa-msg__b { max-width: 100%; }
}

/* Formularis heretats dins del compte: la foto de perfil no ha de dominar el panell. */
body[data-tema] .pa-aula [data-pa-tab-panel] .foto-perfil { max-width: 160px; border-radius: 10px; }
body[data-tema] .pa-aula [data-pa-tab-panel] .form-control { max-width: 520px; }

/* ===================== Plans de subscripció (pàgina de preus) ===================== */
body[data-tema] .pa-tarifes { max-width: 1140px; margin: 0 auto; padding: 40px 16px 56px; }
body[data-tema] .pa-tarifes__cap { text-align: center; max-width: 620px; margin: 0 auto 34px; }

body[data-tema] .pa-tarifes__cap .eyebrow {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--preparacio-orange-deep);
    margin: 0 0 10px;
}

/* ⚠️ Capçalera i targetes van a l'escala de la pàgina pública de preus
   (`.pa-preus` / `.pa-plan`, més amunt): són la mateixa oferta vista dos cops i, amb
   mides diferents, la de dins semblava una versió encongida de la de fora. */
body[data-tema] .pa-tarifes__cap h1 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 40px;
    letter-spacing: -.02em;
    color: var(--ink);
    margin: 0 0 12px;
}

body[data-tema] .pa-tarifes__cap .lead { font-size: 18px; line-height: 1.55; color: var(--fg-2); margin: 0; }

body[data-tema] .pa-tarifes__avis {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 720px;
    margin: 0 auto 28px;
    background: var(--digcomp-a4-tint);
    border: 1px solid var(--digcomp-a4);
    border-radius: var(--radius-3);
    padding: 12px 16px;
    font-size: 14px;
    color: var(--fg-1);
}

body[data-tema] .pa-tarifes__avis i { color: var(--digcomp-a4-deep); flex: none; }
body[data-tema] .pa-tarifes__avis--error { background: var(--digcomp-a5-tint); border-color: var(--digcomp-a5); }
body[data-tema] .pa-tarifes__avis--error i { color: var(--digcomp-a5-deep); }

body[data-tema] .pa-tarifes__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
    align-items: stretch;
}

body[data-tema] .pa-tarifa {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-1);
    border: 1px solid var(--border-1);
    border-radius: 16px;
    box-shadow: var(--shadow-1);
    padding: 26px 22px 24px;
}

body[data-tema] .pa-tarifa--destacat { border: 2px solid var(--preparacio-orange); box-shadow: var(--shadow-2); }

/* Centrada al capdamunt, com la `.badge-rec` de la pàgina pública. */
body[data-tema] .pa-tarifa__cinta {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--preparacio-orange);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

body[data-tema] .pa-tarifa h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 19px;
    color: var(--ink);
    margin: 0 0 3px;
}

/* `min-height` perquè el preu quedi a la mateixa alçada a totes les targetes,
   tinguin el subtítol d'una línia o de dues. */
body[data-tema] .pa-tarifa__sub { font-size: 12.5px; line-height: 1.4; color: var(--fg-3); margin: 0 0 16px; min-height: 32px; }
body[data-tema] .pa-tarifa__preu { margin: 0 0 18px; }
body[data-tema] .pa-tarifa__preu b { font-family: var(--font-display); font-weight: 800; font-size: 36px; letter-spacing: -.02em; color: var(--ink); }
/* `nowrap`: la durada és una unitat i, partida, deixava un «/ 12» sol a la primera línia. */
body[data-tema] .pa-tarifa__preu span { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); margin-left: 4px; white-space: nowrap; }
body[data-tema] .pa-tarifa__llista { list-style: none; padding: 0; margin: 0 0 20px; flex: 1; }

body[data-tema] .pa-tarifa__llista li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--fg-1);
    margin-bottom: 9px;
}

body[data-tema] .pa-tarifa__llista i { font-size: 13px; color: var(--digcomp-a4-deep); margin-top: 1px; flex: none; }
body[data-tema] .pa-tarifa__btn { width: 100%; justify-content: center; padding: 11px; font-size: 14.5px; text-align: center; }
body[data-tema] .pa-tarifa__btn.disabled { opacity: .7; pointer-events: none; }
body[data-tema] .pa-tarifa__nota { font-size: 13px; color: var(--fg-3); text-align: center; }
/* Text lliure del pla: va sota la llista, que és qui s'estira (`flex: 1`), perquè els
   botons de totes les targetes es quedin alineats a baix. */
body[data-tema] .pa-tarifa__text { font-size: 12.5px; line-height: 1.45; color: var(--fg-2); margin: 0 0 18px; }
body[data-tema] .pa-tarifes__peu { text-align: center; font-size: 14px; color: var(--fg-2); margin: 30px 0 0; }

/* ===== Checkout de la subscripció (?v=subscriure) ===== */
body[data-tema] .pa-check { max-width: 980px; margin: 0 auto; padding: 34px 0 60px; }
body[data-tema] .pa-check__torna { margin: 0 0 12px; font-size: 13px; }
body[data-tema] .pa-check__torna a { color: var(--fg-3); }

body[data-tema] .pa-check h1 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 32px;
    letter-spacing: -.02em;
    color: var(--ink);
    margin: 0 0 22px;
}

body[data-tema] .pa-check h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 17px;
    color: var(--ink);
    margin: 0 0 16px;
}

/* Dades a l'esquerra i resum a la dreta, com al handoff. */
body[data-tema] .pa-check__cols { display: grid; grid-template-columns: 1fr 360px; gap: 20px; align-items: start; }
body[data-tema] .pa-check__col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

body[data-tema] .pa-check__camp { display: block; margin: 0 0 14px; }
body[data-tema] .pa-check__camp > span {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    color: var(--fg-2);
    margin: 0 0 5px;
}

body[data-tema] .pa-check__camp input,
body[data-tema] .pa-check__codi input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 13px;
    border: 1px solid var(--border-1);
    border-radius: 8px;
    background: var(--bg-1);
    font-family: var(--font-body);
    font-size: 14.5px;
    color: var(--ink);
}

body[data-tema] .pa-check__camp input:focus,
body[data-tema] .pa-check__codi input:focus { outline: 2px solid var(--preparacio-orange-soft); border-color: var(--preparacio-orange); }

body[data-tema] .pa-check__jo { margin: 0 0 14px; font-size: 14.5px; color: var(--ink); }
body[data-tema] .pa-check__jo span { font-size: 13px; color: var(--fg-3); }
body[data-tema] .pa-check__nota { margin: 0 0 14px; font-size: 12.5px; line-height: 1.5; color: var(--fg-3); }

body[data-tema] .pa-check__accepta { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: var(--fg-2); }
body[data-tema] .pa-check__accepta input { margin: 2px 0 0; flex: none; }

body[data-tema] .pa-check__segur { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 12px; line-height: 1.5; color: var(--fg-3); }
body[data-tema] .pa-check__segur i { margin-top: 2px; color: var(--digcomp-a4-deep); }

body[data-tema] .pa-check__resum { position: sticky; top: 20px; }
body[data-tema] .pa-check__linia { display: flex; gap: 12px; justify-content: space-between; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--border-1); }
body[data-tema] .pa-check__linia b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink); }
body[data-tema] .pa-check__linia em { display: block; font-style: normal; font-size: 12px; color: var(--fg-3); }
body[data-tema] .pa-check__linia > span { font-family: var(--font-mono); font-size: 13px; color: var(--fg-1); white-space: nowrap; }
body[data-tema] .pa-check__linia--desc > span { color: var(--digcomp-a4-deep); }

body[data-tema] .pa-check__codi { display: flex; gap: 8px; align-items: flex-end; padding: 14px 0 4px; border-top: 1px solid var(--border-1); }
body[data-tema] .pa-check__codi label { flex: 1; min-width: 0; margin: 0; }
body[data-tema] .pa-check__codi label > span { display: block; font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--fg-2); margin: 0 0 5px; }
/* ⚠️ Sense `text-transform: uppercase`: el localitzador és base64
   (`producteLocalitzadorNou()` = `substr(base64_encode(mt_rand()), 0, 6)`) i porta
   majúscules i minúscules barrejades, així que pintar-lo tot en majúscules ensenya
   `NTIYND` on el correu deia `NTIyND`. La cerca és insensible a majúscules
   (`ElearningPla::getLocalitzador()` compara amb `strcasecmp()`), de manera que el
   codi funciona igual; el que no ha de fer la pantalla és semblar que l'ha canviat. */
body[data-tema] .pa-check__codi input { font-family: var(--font-mono); }
body[data-tema] .pa-check__codi--ko { border-color: var(--digcomp-a5) !important; }
body[data-tema] .pa-check__codi .btn { flex: none; }
body[data-tema] .pa-check__codiErr { margin: 6px 0 0; font-size: 12.5px; color: var(--digcomp-a5-deep); }

body[data-tema] .pa-check__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 6px; padding-top: 14px; border-top: 2px solid var(--ink); }
body[data-tema] .pa-check__total span { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); }
body[data-tema] .pa-check__total b { font-family: var(--font-display); font-weight: 800; font-size: 28px; letter-spacing: -.02em; color: var(--ink); }
body[data-tema] .pa-check__iva { margin: 8px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--fg-3); }
body[data-tema] .pa-check__cta { width: 100%; justify-content: center; text-align: center; margin-top: 14px; padding: 13px; font-size: 14.5px; }

/* Pantalla final */
body[data-tema] .pa-check--fet { max-width: 620px; text-align: center; padding-top: 60px; }
body[data-tema] .pa-check--fet h1 { margin-bottom: 12px; }
body[data-tema] .pa-check__ok {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--digcomp-a4-tint);
    color: var(--digcomp-a4-deep);
    font-size: 26px;
}

body[data-tema] .pa-check__botons { margin-top: 24px; }

/* Tria de la contrasenya des de la mateixa pantalla de confirmació. La targeta va
   centrada, però els camps no: amb el `text-align: center` de `--fet` els rètols
   surarien sobre el camp en comptes d'alinear-s'hi. */
body[data-tema] .pa-check__clau { max-width: 340px; margin: 24px auto 0; text-align: left; }
body[data-tema] .pa-check__clau .btn { width: 100%; justify-content: center; text-align: center; padding: 12px; }
body[data-tema] .pa-check__clau .help-block { margin: 0 0 10px; font-size: 12.5px; color: var(--digcomp-a5-deep); }
/* `submitGen()` hi escriu els errors del servidor; buit no ha d'ocupar cap espai. */
body[data-tema] .pa-check__clau .help-block:empty { display: none; }

@media (max-width: 860px) {
    /* La pàgina no va dins del contenidor del tema: sense marge lateral, el títol i
       les targetes quedaven enganxats a la vora de la pantalla. */
    body[data-tema] .pa-check { padding: 24px 16px 48px; }
    body[data-tema] .pa-check__cols { grid-template-columns: 1fr; }
    /* El resum puja a dalt: el que es compra ha de ser el primer que es veu. */
    body[data-tema] .pa-check__col:last-child { order: -1; }
    body[data-tema] .pa-check__resum { position: static; }
    body[data-tema] .pa-check h1 { font-size: 26px; }
}
body[data-tema] .pa-tarifes .pa-buit { text-align: center; padding: 30px; color: var(--fg-3); }

/* Subscripció dins del compte de l'aula */
body[data-tema] .pa-aula .pa-subs__cap { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
body[data-tema] .pa-aula .pa-subs__cap b { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink); }

body[data-tema] .pa-aula .pa-subs__dades {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
    margin: 0 0 18px;
}

body[data-tema] .pa-aula .pa-subs__dades dt { font-size: 12px; color: var(--fg-3); font-weight: 400; margin-bottom: 3px; }
body[data-tema] .pa-aula .pa-subs__dades dd { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); margin: 0; }
body[data-tema] .pa-aula .pa-subs .btn { padding: 9px 16px; font-size: 13.5px; }

@media (max-width: 700px) {
    body[data-tema] .pa-tarifes__cap h1 { font-size: 28px; }
}

/* Llista de factures dins de la pestanya de subscripció */
body[data-tema] .pa-aula .pa-subs__t {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
    margin: 26px 0 14px;
    padding-top: 18px;
    border-top: 1px solid var(--border-1);
}

/* ===================== Índex d'un curs (handoff «Aula curs índex») ===================== */
body[data-tema] .pa-aula .pa-idx-xip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    padding: 5px 11px;
    border-radius: var(--radius-pill);
}

body[data-tema] .pa-aula .pa-idx-xip > span { width: 8px; height: 8px; border-radius: 50%; }

/* El xip de l'àrea va a la capçalera, al costat del nom del curs: no s'ha
   d'encongir quan el títol és llarg. */
body[data-tema] .pa-aula-cap .pa-idx-xip { flex: none; }

/* «Continua on ho vas deixar»: barra a tota l'amplada per sobre de l'índex —text a
   l'esquerra, botó a la dreta— des que la columna lateral s'ha retirat perquè el
   contingut s'endugui tot l'espai horitzontal. El fons és el de qualsevol .pa-card. */
body[data-tema] .pa-aula .pa-idx-continua { flex-direction: row; align-items: center; gap: 20px; flex-wrap: wrap; }
body[data-tema] .pa-aula .pa-idx-continua__d { flex: 1 1 260px; min-width: 0; }
body[data-tema] .pa-aula .pa-idx-continua__t {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    color: var(--fg-3);
}
body[data-tema] .pa-aula .pa-idx-continua__n { font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1.35; color: var(--ink); margin: 5px 0 3px; }
body[data-tema] .pa-aula .pa-idx-continua__m { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-3); }
body[data-tema] .pa-aula .pa-idx-continua .btn { flex: none; justify-content: center; padding: 11px 20px; font-size: 13.5px; }

body[data-tema] .pa-aula .pa-idx-tots {
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-pill);
    padding: 7px 13px;
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12.5px;
    color: var(--fg-2);
}

body[data-tema] .pa-aula .pa-idx-tots:hover { background: var(--bg-3); }

/* Pestanyes funcionals del curs (tauler, exercicis, dubtes…) pintades com a botons
   dins de la targeta de contingut: la barra de pestanyes de sempre queda amagada
   —`pa-tabs-botons`— i el panell es queda al final de la pàgina.

   Van a la fila del títol i just a l'esquerra de «Desplegar tots els blocs»: el
   `margin-left` automàtic passa d'aquell botó al grup, o l'espai sobrant es
   repartiria entre tots dos i els separaria. La fila embolica quan no hi caben. */
body[data-tema] .pa-aula .pa-idx-blocs .pa-card__cap { flex-wrap: wrap; }
body[data-tema] .pa-aula .pa-idx-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
body[data-tema] .pa-aula .pa-card__cap .pa-idx-tots { margin-left: 0; }

body[data-tema] .pa-aula .pa-idx-tabs__b {
    background: transparent;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-pill);
    padding: 7px 15px;
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12.5px;
    color: var(--fg-2);
}

body[data-tema] .pa-aula .pa-idx-tabs__b:hover { background: var(--bg-3); color: var(--ink); }
/* Actiu: el color de l'àrea del curs. El fons va aquí i no amb `pa-area-band`, que
   té la mateixa especificitat i es declara abans: el `background` d'aquí el guanya. */
body[data-tema] .pa-aula .pa-idx-tabs__b.actiu {
    background: var(--pa-band, var(--digcomp-a1));
    border-color: transparent;
    color: #fff;
}
/* Respostes sense llegir al botó «Dubtes»: el mateix numeret del menú, dins del
   botó. Amb el botó actiu (fons de l'àrea) es queda blanc sobre transparent. */
body[data-tema] .pa-aula .pa-idx-tabs__n {
    display: inline-block;
    margin-left: 6px;
    background: var(--preparacio-orange);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: var(--radius-pill);
}

body[data-tema] .pa-aula .pa-idx-tabs__b.actiu .pa-idx-tabs__n { background: rgba(255, 255, 255, .28); }

body[data-tema] .pa-curs-contingut .nav-pills.pa-tabs-botons { display: none; }
body[data-tema] .pa-aula .pa-idx-bloc { border-top: 1px solid var(--border-1); }

body[data-tema] .pa-aula .pa-idx-bloc__cap {
    width: 100%;
    text-align: left;
    border: 0;
    cursor: pointer;
    padding: 15px 24px;
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bg-1);
}

body[data-tema] .pa-aula .pa-idx-bloc.obert .pa-idx-bloc__cap { background: var(--bg-2); }
body[data-tema] .pa-aula .pa-idx-bloc__cap:hover { background: var(--bg-2); }
body[data-tema] .pa-aula .pa-idx-bloc.obert .pa-idx-bloc__cap .fa-chevron-down { transform: rotate(180deg); }
body[data-tema] .pa-aula .pa-idx-bloc__cap .fa-chevron-down { color: var(--fg-3); transition: transform 200ms var(--easing-standard); }

body[data-tema] .pa-aula .pa-idx-bloc__n {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    background: var(--bg-3);
    color: var(--fg-3);
}

body[data-tema] .pa-aula .pa-idx-bloc__n--fet { background: var(--state-success); color: #fff; }
body[data-tema] .pa-aula .pa-idx-bloc__n--curs { color: #fff; }
body[data-tema] .pa-aula .pa-idx-bloc__d { flex: 1; min-width: 0; }
body[data-tema] .pa-aula .pa-idx-bloc__d b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 14.5px; color: var(--ink); }
body[data-tema] .pa-aula .pa-idx-bloc__d em { display: block; font-style: normal; font-size: 12px; color: var(--fg-3); margin-top: 2px; }
body[data-tema] .pa-aula .pa-idx-bloc__c { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-3); flex: none; }

body[data-tema] .pa-aula .pa-idx-bloc__acts {
    padding: 0 24px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    animation: pa-fade 200ms var(--easing-standard);
}

body[data-tema] .pa-aula .pa-idx-bloc__acts[hidden] { display: none; }

body[data-tema] .pa-aula .pa-idx-act {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 11px 14px;
    border: 1px solid var(--border-1);
    border-radius: 10px;
    color: inherit;
    background: var(--bg-1);
    cursor: pointer;
}

body[data-tema] .pa-aula .pa-idx-act:hover { background: var(--bg-2); text-decoration: none; color: inherit; }
body[data-tema] .pa-aula .pa-idx-act--blocat { cursor: default; opacity: .75; }
body[data-tema] .pa-aula .pa-idx-act--blocat:hover { background: var(--bg-1); }
body[data-tema] .pa-aula .pa-idx-act--blocat .pa-idx-act__t b { color: var(--fg-3); font-weight: 600; }
body[data-tema] .pa-aula .pa-idx-act--curs { background: var(--bg-2); }

body[data-tema] .pa-aula .pa-idx-act__m {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    background: var(--bg-3);
    color: var(--fg-3);
}

body[data-tema] .pa-aula .pa-idx-act__m--fet { background: var(--state-success); color: #fff; }
/* Qüestionari finalitzat però no superat: fet, amb el resultat en vermell. */
body[data-tema] .pa-aula .pa-idx-act__m--fallat { background: var(--state-danger); color: #fff; }
body[data-tema] .pa-aula .pa-idx-act--fallat .pa-idx-act__d em { color: var(--state-danger); }
body[data-tema] .pa-aula .pa-idx-act__m--curs { color: #fff; }
body[data-tema] .pa-aula .pa-idx-act__m--pendent .fa-circle { font-size: 6px; }
body[data-tema] .pa-aula .pa-idx-act__d { flex: 1; min-width: 0; }
body[data-tema] .pa-aula .pa-idx-act__t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body[data-tema] .pa-aula .pa-idx-act__t b { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--ink); }
body[data-tema] .pa-aula .pa-idx-act--curs .pa-idx-act__t b { font-weight: 700; }
body[data-tema] .pa-aula .pa-idx-act__d em { display: block; font-style: normal; font-size: 11.5px; color: var(--fg-3); margin-top: 3px; }
body[data-tema] .pa-aula .pa-idx-act__h { font-family: var(--font-mono); font-size: 11px; color: var(--fg-mute); flex-shrink: 0; }

body[data-tema] .pa-aula .pa-idx-tipus {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: var(--radius-1);
    background: var(--bg-3);
    color: var(--fg-3);
}

body[data-tema] .pa-aula .pa-idx-tipus--exercici { background: var(--digcomp-a3-tint); color: var(--digcomp-a3-deep); }
/* El simulador porta to propi: si compartís el de l'exercici, distingir-los tornaria a
   dependre només de llegir l'etiqueta, que és el que es volia arreglar. */
body[data-tema] .pa-aula .pa-idx-tipus--simulador { background: var(--digcomp-a4-tint); color: var(--digcomp-a4-deep); }
body[data-tema] .pa-aula .pa-idx-tipus--prova { background: var(--spin-blue-tint); color: var(--spin-blue-deep); }
/* Paquet SCORM: to propi, com el simulador, perquè distingir-lo d'una fitxa no depengui
   només de llegir l'etiqueta. */
body[data-tema] .pa-aula .pa-idx-tipus--scorm { background: var(--digcomp-a2-tint); color: var(--digcomp-a2-deep); }
body[data-tema] .pa-aula .pa-idx-tipus i { font-size: 9px; }

/* Fila de l'índex: l'activitat i, a sota, la seva entrega. L'embolcall existeix
   perquè els botons de l'entrega no poden anar dins de l'<a> de l'activitat i perquè
   el formulari d'entrega s'insereix al seu lloc (`.form-edit` de lms.js).
   ⚠️ Les regles de `[hidden]` no són opcionals: amb un `display` d'autor, l'estil del
   navegador per a `[hidden]` no guanya i el filtre d'exercicis no amagaria res. */
body[data-tema] .pa-aula .pa-idx-fila { display: flex; flex-direction: column; gap: 6px; }
body[data-tema] .pa-aula .pa-idx-fila[hidden],
body[data-tema] .pa-aula .pa-idx-bloc[hidden],
body[data-tema] .pa-aula .pa-idx-bloc__d em[hidden] { display: none; }

/* Alineada amb el text de l'activitat: 14px de coixí + 1 de vora + 22 de marca + 13 de separació. */
body[data-tema] .pa-aula .pa-idx-ent {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 0 14px 2px 50px;
}

body[data-tema] .pa-aula .pa-idx-ent__x {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-pill);
    padding: 3px 10px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 11px;
    background: var(--bg-3);
    color: var(--fg-2);
}

body[data-tema] .pa-aula .pa-idx-ent__x--pendent { background: var(--state-warning); color: #fff; }
body[data-tema] .pa-aula .pa-idx-ent__x--ok { background: var(--state-success); color: #fff; }
body[data-tema] .pa-aula .pa-idx-ent__x--ko { background: var(--state-danger); color: #fff; }

body[data-tema] .pa-aula .pa-idx-ent__b {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-pill);
    padding: 4px 12px;
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 11.5px;
    color: var(--fg-2);
}

body[data-tema] .pa-aula .pa-idx-ent__b:hover { background: var(--bg-3); color: var(--ink); text-decoration: none; }
body[data-tema] .pa-aula .pa-idx-ent__b--fer { border-color: var(--pa-band, var(--digcomp-a1)); color: var(--ink); }

body[data-tema] .pa-aula .pa-idx-doc {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    border-radius: 8px;
    color: inherit;
    font-size: 13px;
}

body[data-tema] .pa-aula .pa-idx-doc:hover { background: var(--bg-2); text-decoration: none; color: inherit; }
body[data-tema] .pa-aula .pa-idx-doc span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-tema] .pa-aula .pa-idx-doc .fa-download { color: var(--fg-mute); font-size: 12px; }

/* Colors d'àrea aplicats a fons, vora, text i xip */
body[data-tema] .pa-aula .pa-area-xip-a1 { background: var(--digcomp-a1-tint); color: var(--digcomp-a1-deep); }
body[data-tema] .pa-aula .pa-area-xip-a2 { background: var(--digcomp-a2-tint); color: var(--digcomp-a2-deep); }
body[data-tema] .pa-aula .pa-area-xip-a3 { background: var(--digcomp-a3-tint); color: var(--digcomp-a3-deep); }
body[data-tema] .pa-aula .pa-area-xip-a4 { background: var(--digcomp-a4-tint); color: var(--digcomp-a4-deep); }
body[data-tema] .pa-aula .pa-area-xip-a5 { background: var(--digcomp-a5-tint); color: var(--digcomp-a5-deep); }
body[data-tema] .pa-aula .pa-area-txt-a1 { color: var(--digcomp-a1-deep); }
body[data-tema] .pa-aula .pa-area-txt-a2 { color: var(--digcomp-a2-deep); }
body[data-tema] .pa-aula .pa-area-txt-a3 { color: var(--digcomp-a3-deep); }
body[data-tema] .pa-aula .pa-area-txt-a4 { color: var(--digcomp-a4-deep); }
body[data-tema] .pa-aula .pa-area-txt-a5 { color: var(--digcomp-a5-deep); }
body[data-tema] .pa-aula .pa-idx-act--curs.pa-area-vora-a1 { border-color: var(--digcomp-a1); }
body[data-tema] .pa-aula .pa-idx-act--curs.pa-area-vora-a2 { border-color: var(--digcomp-a2); }
body[data-tema] .pa-aula .pa-idx-act--curs.pa-area-vora-a3 { border-color: var(--digcomp-a3); }
body[data-tema] .pa-aula .pa-idx-act--curs.pa-area-vora-a4 { border-color: var(--digcomp-a4); }
body[data-tema] .pa-aula .pa-idx-act--curs.pa-area-vora-a5 { border-color: var(--digcomp-a5); }
/* Variants de `--pa-band`: el color de l'etiqueta és un hex solt i no porta la
   parella `-tint`/`-deep` de la paleta, així que el fons clar i el to fosc del
   text es deriven del mateix color. */
body[data-tema] .pa-aula .pa-area-xip-band {
    background: color-mix(in oklab, var(--pa-band, var(--digcomp-a1)) 18%, #fff 82%);
    color: color-mix(in oklab, var(--pa-band, var(--digcomp-a1)) 72%, #000 28%);
}
body[data-tema] .pa-aula .pa-area-txt-band { color: color-mix(in oklab, var(--pa-band, var(--digcomp-a1)) 72%, #000 28%); }
body[data-tema] .pa-aula .pa-idx-act--curs.pa-area-vora-band { border-color: var(--pa-band, var(--digcomp-a1)); }

@media (max-width: 860px) {
    /* Quan la fila del títol embolica, el grup de pestanyes s'alinea a l'esquerra com
       la resta: amb el marge automàtic quedava penjat a la dreta ell tot sol. */
    body[data-tema] .pa-aula .pa-idx-tabs { margin-left: 0; }
    body[data-tema] .pa-aula .pa-idx-bloc__cap { padding: 14px 16px; }
    body[data-tema] .pa-aula .pa-idx-bloc__acts { padding: 0 16px 14px; }
    body[data-tema] .pa-aula .pa-idx-act { flex-wrap: wrap; }
}

/* ===================== Activitat a pàgina pròpia (vídeo / qüestionari amb notes) ===================== */
body[data-tema] .pa-aula .pa-act-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 372px;
    gap: 24px;
    align-items: start;
    max-width: 1400px;
}

body[data-tema] .pa-aula .pa-act-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
body[data-tema] .pa-aula .pa-act-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 90px; }

body[data-tema] .pa-aula .pa-act-video {
    background: var(--ink);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-2);
}

body[data-tema] .pa-aula .pa-act-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* Unitat d'ÀUDIO (podcast, microlearning) — #228538. Mides en px: aquí hi corre
   Bootstrap 3, que fixa html { font-size: 10px } i deixa el `rem` sense sentit. */
body[data-tema] .pa-aula .pa-act-audio {
    background: var(--bg-1);
    border: 1px solid var(--border-1);
    border-radius: 14px;
    box-shadow: var(--shadow-1);
    padding: 20px;
}

body[data-tema] .pa-aula .pa-act-audio__marc {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

body[data-tema] .pa-aula .pa-act-audio__icona {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    background: var(--pa-band, var(--spin-blue));
}

body[data-tema] .pa-aula .pa-act-audio__cos { flex: 1 1 auto; min-width: 0; }

body[data-tema] .pa-aula .pa-act-audio__titol {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    margin: 0 0 10px;
}

body[data-tema] .pa-aula .pa-act-audio__player { display: block; width: 100%; }

body[data-tema] .pa-aula .pa-act-audio__barra {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
}

body[data-tema] .pa-aula .pa-act-audio__vel {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

body[data-tema] .pa-aula .pa-act-audio__vel label { margin: 0; font-weight: 600; }

body[data-tema] .pa-aula .pa-act-audio__select {
    border: 1px solid var(--border-1);
    border-radius: 8px;
    background: var(--bg-2);
    color: inherit;
    padding: 4px 8px;
    font-size: 13px;
}

body[data-tema] .pa-aula .pa-act-audio__estat,
body[data-tema] .pa-aula .pa-act-audio__repren {
    margin: 0;
    font-size: 13px;
    color: var(--fg-2);
}

body[data-tema] .pa-aula .pa-act-audio__repren { margin-top: 8px; }

@media (max-width: 600px) {
    body[data-tema] .pa-aula .pa-act-audio__marc { gap: 12px; }
    body[data-tema] .pa-aula .pa-act-audio__icona { width: 36px; height: 36px; font-size: 16px; }
}

/* Unitat de PAQUET SCORM — #228532. Mides en px: aquí hi corre Bootstrap 3, que fixa
   html { font-size: 10px } i deixa el `rem` sense sentit. */
body[data-tema] .pa-aula .pa-act-scorm {
    background: var(--bg-1);
    border: 1px solid var(--border-1);
    border-radius: 14px;
    box-shadow: var(--shadow-1);
    padding: 20px;
}

body[data-tema] .pa-aula .pa-act-scorm__marc {
    display: block;
    width: 100%;
    min-height: 520px;
    border: 0;
    border-radius: 10px;
    background: var(--bg-2);
}

body[data-tema] .pa-aula .pa-act-scorm__estat {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--fg-2);
}

body[data-tema] .pa-aula .pa-act-scorm__avis {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

body[data-tema] .pa-aula .pa-act-scorm__icona {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    background: var(--pa-band, var(--spin-blue));
}

body[data-tema] .pa-aula .pa-act-scorm__titol {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    margin: 0 0 8px;
}

body[data-tema] .pa-aula .pa-act-scorm__motiu,
body[data-tema] .pa-aula .pa-act-scorm__nota {
    margin: 0 0 6px;
    font-size: 13px;
    color: var(--fg-2);
}

body[data-tema] .pa-aula .pa-act-scorm__codi {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 12px;
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--bg-3);
    color: var(--fg-3);
}

@media (max-width: 600px) {
    body[data-tema] .pa-aula .pa-act-scorm__avis { gap: 12px; }
    body[data-tema] .pa-aula .pa-act-scorm__icona { width: 36px; height: 36px; font-size: 16px; }
    body[data-tema] .pa-aula .pa-act-scorm__marc { min-height: 380px; }
}

body[data-tema] .pa-aula .pa-act-marc {
    background: var(--bg-1);
    border: 1px solid var(--border-1);
    border-radius: 14px;
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

/* L'alçada la fixa el client amb la que publica la pàgina de dins (vegeu
   `initIframeAuto`): el `min-height` només és el punt de partida mentre carrega. */
body[data-tema] .pa-aula .pa-act-marc iframe { display: block; width: 100%; min-height: 640px; border: 0; }

/* Capçalera del qüestionari: títol + meta a l'esquerra, estat i «Sortir» a la dreta. */
body[data-tema] .pa-aula .pa-act-titol { min-width: 0; }
body[data-tema] .pa-aula .pa-act-titol b {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
    line-height: 1.25;
}

body[data-tema] .pa-aula .pa-act-titol em { display: block; font-style: normal; font-size: 12px; color: var(--fg-3); }
body[data-tema] .pa-aula .pa-act-cap-dreta { margin-left: auto; display: flex; align-items: center; gap: 16px; }

body[data-tema] .pa-aula .pa-act-desat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--fg-3);
    white-space: nowrap;
}

body[data-tema] .pa-aula .pa-act-sortir {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    color: var(--fg-2);
    white-space: nowrap;
}

body[data-tema] .pa-aula .pa-act-sortir:hover { color: var(--preparacio-orange-deep); text-decoration: none; }

@media (max-width: 700px) {
    body[data-tema] .pa-aula .pa-act-desat { display: none; }
}

/* Una prova va a una sola columna: la dreta era el quadern de notes, i qui hi fa de
   panell lateral és el del motor de qüestionaris, que ja viu dins de l'iframe. */
body[data-tema] .pa-aula .pa-act-cols--sol {
    grid-template-columns: minmax(0, 1fr);
    max-width: 1320px;
}

/* ------------------------------------------------------------------
   Una prova va ENCAIXADA a la pantalla, no en una pàgina que creix.
   ------------------------------------------------------------------
   Amb l'iframe creixent (el que fan la resta d'activitats) qui desplaçava era la
   pàgina de l'aula, i llavors: el panell d'examen —que dins de l'iframe és
   `position: fixed`, i el seu «fixed» és el de l'iframe— se n'anava amunt amb el
   contingut, el botó d'enviar quedava sota la línia de flotació i, a sobre, els
   98 px de capçalera i coixí de l'aula descomptaven de la pregunta. Mesurat al banc
   de preguntes de l'ACTIC en una finestra de 1440×900: 97 % de les pantalles
   demanaven desplaçar-se.

   Amb la caixa encaixada, l'iframe ocupa exactament el que queda sota la capçalera i
   el motor de qüestionaris recupera el seu `height: 100%`: qui desplaça és la caixa
   de la pregunta (`#contingut`), amb el panell d'examen i el peu d'enviament sempre
   a la vista. ⚠️ L'alçada es reparteix amb flex i no amb un `calc(100dvh - 70px)`:
   la capçalera creix quan embolica en pantalles estretes.
   ⚠️ `dvh` i no `vh`: al mòbil, amb la barra del navegador, `100vh` deixa el peu
   de la pregunta per sota de la pantalla. */
body[data-tema] .pa-aula:has(.pa-aula-cos--prova) {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
}

body[data-tema] .pa-aula:has(.pa-aula-cos--prova) .pa-aula-main {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* ⚠️ `.pa-aula-cos.pa-aula-cos--prova` i no `.pa-aula-cos--prova` sol: empataria en
   especificitat amb `.pa-aula--sol .pa-aula-cos`, que es declara més avall i guanyaria. */
body[data-tema] .pa-aula .pa-aula-cos.pa-aula-cos--prova {
    flex: 1;
    min-height: 0;
    padding: 0;
    /* ⚠️ `margin: 0` no és cosmètic: `.pa-aula--sol .pa-aula-cos` porta `margin: 0 auto` i un
       marge automàtic a l'eix transversal ANUL·LA l'estirament d'un ítem flex —la caixa es
       quedava en els 300px per defecte d'un `<iframe>` en comptes d'omplir la pantalla. */
    margin: 0;
    max-width: none;
    gap: 0;
    align-items: stretch;
}

body[data-tema] .pa-aula .pa-aula-cos--prova .pa-act-main { height: 100%; min-height: 0; gap: 0; }

/* Sense marges ni cantonades: la prova ocupa la pantalla de banda a banda. */
body[data-tema] .pa-aula .pa-aula-cos--prova .pa-act-marc {
    height: 100%;
    min-height: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

body[data-tema] .pa-aula .pa-aula-cos--prova .pa-act-marc iframe { height: 100%; min-height: 0; }

/* Capçalera de l'entorn de prova (pantalla «Aula simulacre» del handoff): fosca, amb
   el distintiu d'assaig i una única sortida. Només l'agafen les proves d'una acció de
   simulacres; la resta de qüestionaris mantenen la capçalera blanca de sempre. */
body[data-tema] .pa-aula-cap--examen {
    background: var(--ink);
    border-bottom: 0;
}

body[data-tema] .pa-aula-cap--examen .pa-aula-mark .b2 { color: #fff; }
body[data-tema] .pa-aula-cap--examen .pa-aula-cap__sep { background: rgba(255, 255, 255, .22); }

body[data-tema] .pa-aula-cap--examen .pa-act-examen-titol {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -.005em;
    color: #fff;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body[data-tema] .pa-aula-cap--examen .pa-act-assaig {
    flex: none;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .85);
}

body[data-tema] .pa-aula .pa-aula-cap--examen .pa-act-sortir {
    margin-left: auto;
    color: rgba(255, 255, 255, .8);
}

body[data-tema] .pa-aula .pa-aula-cap--examen .pa-act-sortir:hover { color: #fff; }

@media (max-width: 700px) {
    body[data-tema] .pa-aula-cap--examen .pa-act-assaig { display: none; }
}
body[data-tema] .pa-aula .pa-act-cap { display: flex; align-items: flex-start; gap: 20px; }

body[data-tema] .pa-aula .pa-act-eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .04em;
    color: var(--fg-3);
    margin: 0 0 6px;
}

body[data-tema] .pa-aula .pa-act-cap h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 25px;
    letter-spacing: -.015em;
    color: var(--ink);
    margin: 0 0 8px;
}

body[data-tema] .pa-aula .pa-act-lead { font-size: 14px; line-height: 1.6; color: var(--fg-2); margin: 0; max-width: 640px; }
body[data-tema] .pa-aula .pa-act-accions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; }

body[data-tema] .pa-aula .pa-act-btn {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid var(--border-1);
    background: var(--bg-1);
    color: var(--fg-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body[data-tema] .pa-aula .pa-act-btn:hover { background: var(--bg-3); color: var(--ink); text-decoration: none; }
body[data-tema] .pa-aula .pa-act-accions .btn { padding: 9px 16px; font-size: 13px; white-space: nowrap; }

body[data-tema] .pa-aula .btn-vist {
    background: var(--state-success);
    border-color: var(--state-success);
    color: #fff;
    opacity: 1;
}

/* Panell de notes */
body[data-tema] .pa-aula .pa-notes { padding: 0; overflow: hidden; }
body[data-tema] .pa-aula .pa-notes__cap { display: flex; align-items: center; gap: 12px; padding: 18px 20px 14px; }

body[data-tema] .pa-aula .pa-notes__ico {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--preparacio-orange-tint);
    color: var(--preparacio-orange-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

body[data-tema] .pa-aula .pa-notes__cap b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); }
body[data-tema] .pa-aula .pa-notes__cap em { display: block; font-style: normal; font-size: 12px; color: var(--fg-3); }
body[data-tema] .pa-aula .pa-notes__pdf { margin-left: auto; font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--fg-2); }
body[data-tema] .pa-aula .pa-notes__pdf:hover { color: var(--preparacio-orange-deep); text-decoration: none; }
body[data-tema] .pa-aula .pa-notes__editor { padding: 0 20px 16px; }
body[data-tema] .pa-aula .pa-notes__temps { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }

body[data-tema] .pa-aula .pa-notes__xip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    background: var(--preparacio-orange-tint);
    color: var(--preparacio-orange-deep);
    padding: 3px 9px;
    border-radius: var(--radius-pill);
}

body[data-tema] .pa-aula .pa-notes__temps em { font-style: normal; font-size: 11.5px; color: var(--fg-3); }

body[data-tema] .pa-aula .pa-notes textarea {
    width: 100%;
    min-height: 96px;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--bg-2);
    border: 1px solid var(--border-1);
    border-radius: 10px;
    padding: 12px 13px;
    resize: vertical;
}

body[data-tema] .pa-aula .pa-notes textarea:focus { outline: 2px solid var(--spin-blue); outline-offset: 2px; background: var(--bg-1); }
body[data-tema] .pa-aula .pa-notes__accions { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
body[data-tema] .pa-aula .pa-notes__accions span { flex: 1; font-size: 11.5px; color: var(--fg-3); }
body[data-tema] .pa-aula .pa-notes__accions .btn { padding: 9px 14px; font-size: 13px; }
body[data-tema] .pa-aula .pa-notes__llista { max-height: 340px; overflow: auto; border-top: 1px solid var(--border-1); }
body[data-tema] .pa-aula .pa-notes__llista:empty { display: none; }

body[data-tema] .pa-aula .pa-nota {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--bg-3);
}

body[data-tema] .pa-aula .pa-nota__t {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 0;
    background: var(--bg-2);
    border-radius: 6px;
    padding: 3px 8px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-2);
    flex: none;
}

body[data-tema] .pa-aula .pa-nota__t:hover { background: var(--preparacio-orange-tint); color: var(--preparacio-orange-deep); }
body[data-tema] .pa-aula .pa-nota__x { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.6; color: var(--fg-1); overflow-wrap: anywhere; }
body[data-tema] .pa-aula .pa-nota__b { border: 0; background: transparent; color: var(--fg-mute); cursor: pointer; flex: none; }
body[data-tema] .pa-aula .pa-nota__b:hover { color: var(--digcomp-a5-deep); }

body[data-tema] .pa-aula .pa-notes__peu {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: var(--bg-2);
    padding: 12px 20px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--fg-3);
}

/* Avís de privacitat de les notes (pantalla del qüestionari). */
body[data-tema] .pa-aula .pa-notes__avis {
    background: var(--spin-blue-tint);
    border: 1px solid var(--spin-blue-soft);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--fg-2);
}

body[data-tema] .pa-aula .pa-notes__avis a { color: var(--spin-blue-deep); font-weight: 600; }

body[data-tema] .pa-aula .pa-act-seguent .eyebrow {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--fg-mute);
    margin: 0 0 10px;
}

body[data-tema] .pa-aula .pa-act-seguent a { display: flex; align-items: center; gap: 12px; color: inherit; }
body[data-tema] .pa-aula .pa-act-seguent a:hover { text-decoration: none; color: inherit; }

body[data-tema] .pa-aula .pa-act-seguent__i {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--bg-3);
    color: var(--fg-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

body[data-tema] .pa-aula .pa-act-seguent b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: var(--ink); }
body[data-tema] .pa-aula .pa-act-seguent em { display: block; font-style: normal; font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-3); }

body[data-tema] .pa-aula .pa-act-seguent__b {
    margin: 10px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--fg-3);
}

/* Estat de l'activitat, el mateix joc de colors que la marca de la fila de l'índex:
   la targeta es refà sola quan l'activitat es completa i ha de dir-ho. */
body[data-tema] .pa-aula .pa-act-seguent--fet .pa-act-seguent__i { background: var(--state-success); color: #fff; }
body[data-tema] .pa-aula .pa-act-seguent--fallat .pa-act-seguent__i { background: var(--state-danger); color: #fff; }
body[data-tema] .pa-aula .pa-act-seguent--blocat .pa-act-seguent__i { opacity: .55; }

/* Entrega feta des de la targeta: mateixos controls que la fila de l'índex, sense el
   sagnat que allà els alinea amb el text de l'activitat. */
body[data-tema] .pa-aula .pa-act-seguent .pa-idx-ent { padding: 12px 0 0; }

/* Formulari d'entrega: `edit()` de lms.js l'insereix com a germà de la targeta, dins
   de la columna de la dreta, i sense això hi quedaria despenjat del disseny. */
body[data-tema] .pa-aula .pa-act-aside > form.ajax {
    background: var(--bg-1);
    border: 1px solid var(--border-1);
    border-radius: 14px;
    box-shadow: var(--shadow-1);
    padding: 18px 20px;
}

@media (max-width: 1100px) {
    body[data-tema] .pa-aula .pa-act-cols { grid-template-columns: 1fr; }
    body[data-tema] .pa-aula .pa-act-aside { position: static; }
}

@media (max-width: 860px) {
    body[data-tema] .pa-aula .pa-act-cap { flex-direction: column; gap: 14px; }
    body[data-tema] .pa-aula .pa-act-marc iframe { min-height: 460px; }
}

/* Pantalla de treball sense barra lateral (vídeo, qüestionari): s'obre en una
   pestanya a part i el contingut es centra. */
body[data-tema] .pa-aula--sol { display: block; }
body[data-tema] .pa-aula--sol .pa-aula-main { width: 100%; }
body[data-tema] .pa-aula--sol .pa-aula-cos { margin: 0 auto; }
body[data-tema] .pa-aula--sol .pa-aula-cap { padding-left: 24px; padding-right: 24px; }
body[data-tema] .pa-aula--sol .pa-aula-cap h1 { font-size: 15px; font-weight: 700; color: var(--fg-2); }
body[data-tema] .pa-aula--sol .pa-aula-mark { flex: none; font-size: 17px; }
body[data-tema] .pa-aula--sol .pa-aula-mark img { max-width: 170px; max-height: 30px; width: auto; height: auto; }

@media (max-width: 860px) {
    body[data-tema] .pa-aula--sol .pa-aula-cap h1,
    body[data-tema] .pa-aula--sol .pa-aula-cap .pa-idx-xip { display: none; }
}

/* ==========================================================================
   Simulacres (?v=simulacres) — model «Aula simulacres» del handoff.
   El contingut és una acció com una altra; l'`estilLms` de cada mòdul decideix
   quin d'aquests blocs el pinta. Mides en px, com la resta del tema.
   ========================================================================== */

body[data-tema] .pa-aula .pa-sim-hero {
    background: linear-gradient(120deg, var(--ink) 0%, #2b2b2b 100%);
    border-radius: var(--radius-4);
    padding: 28px 32px;
    display: flex;
    align-items: center;
    gap: 32px;
    color: #fff;
    overflow: hidden;
    position: relative;
}

body[data-tema] .pa-aula .pa-sim-hero__bola {
    position: absolute;
    right: -70px;
    top: -90px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(255, 150, 0, .14);
}

body[data-tema] .pa-aula .pa-sim-hero__txt { flex: 1; min-width: 0; position: relative; }

body[data-tema] .pa-aula .pa-sim-hero__eyebrow {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--preparacio-orange);
    margin: 0 0 10px;
}

body[data-tema] .pa-aula .pa-sim-hero h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 28px;
    letter-spacing: -.015em;
    color: #fff;
    margin: 0 0 8px;
}

body[data-tema] .pa-aula .pa-sim-hero__lead {
    font-size: 15px;
    color: rgba(255, 255, 255, .72);
    line-height: 1.55;
    max-width: 560px;
    margin: 0;
    text-wrap: pretty;
}

body[data-tema] .pa-aula .pa-sim-hero__data { margin-top: 14px; }

body[data-tema] .pa-aula .pa-sim-hero__link {
    background: none;
    border: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    color: rgba(255, 255, 255, .8);
    cursor: pointer;
}

body[data-tema] .pa-aula .pa-sim-hero__link:hover { color: #fff; }

body[data-tema] .pa-aula .pa-sim-hero__form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

body[data-tema] .pa-aula .pa-sim-hero__form[hidden] { display: none; }

body[data-tema] .pa-aula .pa-sim-hero__form input[type="date"] {
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .1);
    color: #fff;
    border-radius: 8px;
    padding: 7px 10px;
    font-family: var(--font-mono);
    font-size: 13px;
}

body[data-tema] .pa-aula .pa-sim-hero__form input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: .7;
}

body[data-tema] .pa-aula .pa-sim-hero__card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 12px;
    padding: 18px 22px;
    flex: none;
}

body[data-tema] .pa-aula .pa-sim-hero__card-t { font-size: 12px; color: rgba(255, 255, 255, .6); margin-bottom: 3px; }
body[data-tema] .pa-aula .pa-sim-hero__card-n { font-family: var(--font-display); font-weight: 700; font-size: 14px; }
body[data-tema] .pa-aula .pa-sim-hero__card-d { font-family: var(--font-mono); font-size: 11.5px; color: rgba(255, 255, 255, .55); margin-bottom: 10px; }
body[data-tema] .pa-aula .pa-sim-hero__card .btn { padding: 9px 16px; font-size: 13px; }

body[data-tema] .pa-aula .pa-sim-donut {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(var(--preparacio-orange) 0 var(--pct, 0%), rgba(255, 255, 255, .16) var(--pct, 0%) 100%);
}

body[data-tema] .pa-aula .pa-sim-donut > span {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #232323;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 20px;
    color: #fff;
}

/* Pestanyes: són enllaços (?tab=), de manera que l'estat viu a la URL i es pot
   compartir; el panell entrant fa el mateix fos que el prototip. */
body[data-tema] .pa-aula .pa-sim-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    border-bottom: 1px solid var(--border-1);
}

body[data-tema] .pa-aula .pa-sim-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 14px;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14.5px;
    color: var(--fg-3);
    transition: color 160ms var(--easing-standard);
}

body[data-tema] .pa-aula .pa-sim-tabs a:hover { color: var(--ink); text-decoration: none; }
body[data-tema] .pa-aula .pa-sim-tabs a.on { color: var(--ink); border-bottom-color: var(--preparacio-orange); }

body[data-tema] .pa-aula .pa-sim-tabs a span {
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    background: var(--bg-3);
    color: var(--fg-3);
}

body[data-tema] .pa-aula .pa-sim-tabs a.on span {
    background: var(--preparacio-orange-tint);
    color: var(--preparacio-orange-deep);
}

body[data-tema] .pa-aula .pa-sim-panel {
    display: flex;
    flex-direction: column;
    gap: 24px;
    animation: pa-sim-fade 200ms var(--easing-standard);
}

@keyframes pa-sim-fade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

/* Targetes de simulacre */
body[data-tema] .pa-aula .pa-sim-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

body[data-tema] .pa-aula .pa-sim-card {
    background: var(--bg-1);
    border: 1px solid var(--border-1);
    border-radius: 14px;
    box-shadow: var(--shadow-1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow 200ms var(--easing-standard), transform 200ms var(--easing-standard);
}

body[data-tema] .pa-aula .pa-sim-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
body[data-tema] .pa-aula .pa-sim-card__banda { height: 6px; display: block; }
body[data-tema] .pa-aula .pa-sim-card__cos { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
body[data-tema] .pa-aula .pa-sim-card__cap { display: flex; align-items: flex-start; gap: 12px; }

body[data-tema] .pa-aula .pa-sim-card__i {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-3);
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

body[data-tema] .pa-aula .pa-sim-card__cap b {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    color: var(--ink);
    line-height: 1.3;
}

body[data-tema] .pa-aula .pa-sim-card__cap em {
    display: block;
    font-family: var(--font-mono);
    font-style: normal;
    font-size: 11.5px;
    color: var(--fg-3);
    margin-top: 4px;
}

body[data-tema] .pa-aula .pa-sim-card__cos p {
    font-size: 13.5px;
    color: var(--fg-2);
    line-height: 1.55;
    margin: 0;
    text-wrap: pretty;
}

body[data-tema] .pa-aula .pa-sim-card__peu { display: flex; align-items: center; gap: 9px; margin-top: auto; padding-top: 6px; }

body[data-tema] .pa-aula .pa-sim-card__cta {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    color: var(--preparacio-orange-deep);
    cursor: pointer;
}

body[data-tema] .pa-aula .pa-sim-card__cta i { font-size: 11px; }
body[data-tema] .pa-aula .pa-sim-card__cta:hover { text-decoration: none; }

/* Motiu pel qual la prova no es pot obrir: va sota el peu de la targeta i NO s'atenua
   (és l'única cosa que qui la mira ha de poder llegir bé). */
body[data-tema] .pa-aula .pa-sim-card__blocat {
    display: flex;
    gap: 7px;
    font-size: 12.5px;
    color: var(--fg-3);
    line-height: 1.45;
    margin: -2px 0 0;
}

body[data-tema] .pa-aula .pa-sim-card__blocat i { font-size: 11px; line-height: 1.6; }

/* Files d'una llista de proves (per àrea) */
body[data-tema] .pa-aula .pa-sim-fila {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 24px;
    border-top: 1px solid var(--border-1);
}

body[data-tema] .pa-aula .pa-sim-fila__n {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-3);
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 14px;
}

body[data-tema] .pa-aula .pa-sim-fila__d { flex: 1; min-width: 0; }
body[data-tema] .pa-aula .pa-sim-fila__d b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink); }
body[data-tema] .pa-aula .pa-sim-fila__d em { display: block; font-style: normal; font-size: 12px; color: var(--fg-3); margin-top: 2px; }
body[data-tema] .pa-aula .pa-sim-fila__p { font-family: var(--font-mono); font-size: 13px; color: var(--fg-2); width: 54px; text-align: right; flex: none; }
body[data-tema] .pa-aula .pa-sim-fila__b { padding: 8px 14px; font-size: 12.5px; flex: none; }

body[data-tema] .pa-aula .pa-xip--reforc { background: var(--digcomp-a5-tint); color: var(--digcomp-a5-deep); }

/* Historial d'intents */
body[data-tema] .pa-aula .pa-sim-hist {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 24px;
    border-top: 1px solid var(--border-1);
}

body[data-tema] .pa-aula .pa-sim-hist__data { font-family: var(--font-mono); font-size: 12.5px; color: var(--fg-3); width: 92px; flex: none; }
body[data-tema] .pa-aula .pa-sim-hist__d { flex: 1; min-width: 0; }
body[data-tema] .pa-aula .pa-sim-hist__d b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink); }
body[data-tema] .pa-aula .pa-sim-hist__d em { display: block; font-style: normal; font-size: 12px; color: var(--fg-3); margin-top: 2px; }
body[data-tema] .pa-aula .pa-sim-hist__p { width: 132px; display: flex; align-items: center; gap: 10px; flex: none; }
body[data-tema] .pa-aula .pa-sim-hist__p .pa-bar { flex: 1; margin: 0; }
body[data-tema] .pa-aula .pa-sim-hist__p em { font-family: var(--font-mono); font-style: normal; font-weight: 600; font-size: 13px; color: var(--ink); width: 38px; text-align: right; }
body[data-tema] .pa-aula .pa-sim-hist__b { font-family: var(--font-display); font-weight: 700; font-size: 13px; white-space: nowrap; flex: none; }

body[data-tema] .pa-aula .pa-bar--ok > span { background: var(--state-success); }
body[data-tema] .pa-aula .pa-bar--ko > span { background: var(--digcomp-a5); }

/* Xifres de la prova oficial */
body[data-tema] .pa-aula .pa-sim-sub { font-size: 13px; color: var(--fg-3); margin: -10px 0 16px; }
body[data-tema] .pa-aula .pa-sim-xifres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

body[data-tema] .pa-aula .pa-sim-xifra {
    background: var(--bg-2);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-3);
    padding: 15px 16px;
}

body[data-tema] .pa-aula .pa-sim-xifra b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--ink); line-height: 1.1; }
body[data-tema] .pa-aula .pa-sim-xifra em { display: block; font-style: normal; font-size: 12.5px; color: var(--fg-2); margin-top: 5px; line-height: 1.4; }

/* Vídeos de preparació */
body[data-tema] .pa-aula .pa-sim-titol { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
body[data-tema] .pa-aula .pa-sim-titol h3 { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink); margin: 0; }
body[data-tema] .pa-aula .pa-sim-titol span { font-size: 13px; color: var(--fg-3); }
body[data-tema] .pa-aula .pa-sim-videos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

body[data-tema] .pa-aula .pa-sim-video {
    background: var(--bg-1);
    border: 1px solid var(--border-1);
    border-radius: 12px;
    box-shadow: var(--shadow-1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: inherit;
    cursor: pointer;
    transition: box-shadow 200ms var(--easing-standard), transform 200ms var(--easing-standard);
}

body[data-tema] .pa-aula .pa-sim-video:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); text-decoration: none; color: inherit; }

body[data-tema] .pa-aula .pa-sim-video__img {
    aspect-ratio: 16 / 9;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

body[data-tema] .pa-aula .pa-sim-video__play {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    font-size: 16px;
}

body[data-tema] .pa-aula .pa-sim-video__dur {
    position: absolute;
    right: 9px;
    bottom: 9px;
    font-family: var(--font-mono);
    font-size: 11px;
    background: rgba(0, 0, 0, .62);
    color: #fff;
    padding: 2px 7px;
    border-radius: var(--radius-1);
}

body[data-tema] .pa-aula .pa-sim-video__vist {
    position: absolute;
    left: 9px;
    top: 9px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 10.5px;
    background: rgba(255, 255, 255, .92);
    color: var(--ink);
    padding: 3px 8px;
    border-radius: var(--radius-pill);
}

body[data-tema] .pa-aula .pa-sim-video__d { padding: 14px 16px 16px; }
body[data-tema] .pa-aula .pa-sim-video__d b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink); line-height: 1.35; }
body[data-tema] .pa-aula .pa-sim-video__d em { display: block; font-style: normal; font-size: 12px; color: var(--fg-3); margin-top: 5px; }

/* Consells + lateral */
body[data-tema] .pa-aula .pa-sim-cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 22px; align-items: start; }
body[data-tema] .pa-aula .pa-sim-cols--sola { grid-template-columns: 1fr; }
body[data-tema] .pa-aula .pa-sim-cols > div { display: flex; flex-direction: column; gap: 18px; }

body[data-tema] .pa-aula .pa-sim-consell {
    display: flex;
    gap: 14px;
    padding: 15px 24px;
    border-top: 1px solid var(--border-1);
}

body[data-tema] .pa-aula .pa-sim-consell__n {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    flex: none;
    background: var(--preparacio-orange-tint);
    color: var(--preparacio-orange-deep);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body[data-tema] .pa-aula .pa-sim-consell b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink); }
body[data-tema] .pa-aula .pa-sim-consell p { font-size: 13.5px; color: var(--fg-2); line-height: 1.6; margin: 3px 0 0; text-wrap: pretty; }

body[data-tema] .pa-aula .pa-sim-tutor { background: var(--spin-blue-tint); border-color: var(--spin-blue-soft); }
body[data-tema] .pa-aula .pa-sim-tutor p { font-size: 13.5px; color: var(--fg-2); line-height: 1.6; margin: 14px 0; }

@media (max-width: 1100px) {
    body[data-tema] .pa-aula .pa-sim-cards { grid-template-columns: repeat(2, 1fr); }
    body[data-tema] .pa-aula .pa-sim-videos { grid-template-columns: repeat(2, 1fr); }
    body[data-tema] .pa-aula .pa-sim-xifres { grid-template-columns: repeat(2, 1fr); }
    body[data-tema] .pa-aula .pa-sim-cols { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    body[data-tema] .pa-aula .pa-sim-hero { flex-direction: column; align-items: stretch; padding: 22px; }
    body[data-tema] .pa-aula .pa-sim-hero h2 { font-size: 23px; }
    body[data-tema] .pa-aula .pa-sim-cards { grid-template-columns: 1fr; }
    body[data-tema] .pa-aula .pa-sim-videos { grid-template-columns: 1fr; }
    body[data-tema] .pa-aula .pa-sim-fila,
    body[data-tema] .pa-aula .pa-sim-hist { flex-wrap: wrap; padding: 14px 16px; }
    body[data-tema] .pa-aula .pa-sim-hist__p { width: 100%; }
}

/* --------------------------------------------------------------------------
   Subscripció a la capçalera de l'aula (a dalt a la dreta)
   Amb una sola subscripció és un enllaç al detall del compte; amb més d'una
   vigent, el mateix xip obre un desplegable per triar quina es mira.
   -------------------------------------------------------------------------- */
body[data-tema] .pa-aula .pa-subs-cap { margin-left: auto; position: relative; flex: none; max-width: 280px; }
body[data-tema] .pa-aula .pa-subs-cap:hover { text-decoration: none; }

body[data-tema] .pa-aula .pa-subs-cap__b {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 11px;
    border: 1px solid var(--border-1);
    border-radius: var(--radius-3);
    background: var(--bg-1);
    font-family: var(--font-body);
    color: var(--fg-2);
    text-align: left;
    cursor: pointer;
}

body[data-tema] .pa-aula .pa-subs-cap__b:hover { background: var(--bg-3); text-decoration: none; }

/* ⚠️ Bootstrap posa un anell blau a `button:focus`, també en clicar amb el ratolí:
   el focus que es veu ha de ser el del DS i només amb teclat. */
body[data-tema] .pa-aula .pa-subs-cap__b:focus { outline: none; }
body[data-tema] .pa-aula .pa-subs-cap__b:focus-visible {
    outline: 2px solid var(--spin-blue);
    outline-offset: 2px;
}

body[data-tema] .pa-aula .pa-subs-cap__i {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    background: var(--preparacio-orange-tint);
    color: var(--preparacio-orange-deep);
}

body[data-tema] .pa-aula .pa-subs-cap__t { min-width: 0; flex: 1; }

body[data-tema] .pa-aula .pa-subs-cap__n {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body[data-tema] .pa-aula .pa-subs-cap__d {
    display: block;
    font-size: 11px;
    color: var(--fg-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body[data-tema] .pa-aula .pa-subs-cap__x { flex: none; font-size: 11px; color: var(--fg-3); }

body[data-tema] .pa-aula .pa-subs-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 30;
    min-width: 300px;
    padding: 8px;
    background: var(--bg-1);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-3);
    box-shadow: var(--shadow-2);
}

body[data-tema] .pa-aula .pa-subs-menu[hidden] { display: none; }

body[data-tema] .pa-aula .pa-subs-menu__t {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--fg-3);
    padding: 4px 8px 8px;
}

body[data-tema] .pa-aula .pa-subs-menu__i {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: var(--radius-2);
    color: var(--fg-2);
}

body[data-tema] .pa-aula .pa-subs-menu__i:hover { background: var(--bg-3); text-decoration: none; }
body[data-tema] .pa-aula .pa-subs-menu__i > span { min-width: 0; flex: 1; }
body[data-tema] .pa-aula .pa-subs-menu__i b {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    color: var(--ink);
}

body[data-tema] .pa-aula .pa-subs-menu__i em { display: block; font-style: normal; font-size: 11.5px; color: var(--fg-3); }
body[data-tema] .pa-aula .pa-subs-menu__i i { flex: none; color: var(--preparacio-orange-deep); }
body[data-tema] .pa-aula .pa-subs-menu__i.active { background: var(--preparacio-orange-tint); }
body[data-tema] .pa-aula .pa-subs-menu__i.active b { color: var(--preparacio-orange-deep); }
/* ⚠️ El fons de la fila triada és un tint fix (clar també en mode fosc), així que el
   text ha de ser un neutre fix: amb `--fg-2` quedava gris clar sobre crema. */
body[data-tema] .pa-aula .pa-subs-menu__i.active em { color: var(--slate-700); }

body[data-tema] .pa-aula .pa-subs-menu__peu {
    display: block;
    margin-top: 4px;
    padding: 9px 8px 4px;
    border-top: 1px solid var(--border-1);
    font-size: 12px;
    color: var(--fg-3);
}

body[data-tema] .pa-aula .pa-subs-menu__peu:hover { color: var(--ink); text-decoration: none; }

@media (max-width: 860px) {
    body[data-tema] .pa-aula .pa-subs-cap { max-width: none; }
    body[data-tema] .pa-aula .pa-subs-menu { min-width: 0; width: 100%; }
}

/* ----- Pàgina no trobada (404) ----- */
body[data-tema] .pa-404 { max-width: 1140px; margin: 0 auto; padding: 88px 16px 104px; text-align: center; }
body[data-tema] .pa-404 .display { font-size: 46px; margin: 10px 0 0; }
body[data-tema] .pa-404 .lead { max-width: 520px; margin: 14px auto 0; }
body[data-tema] .pa-404__accions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }

@media (max-width: 720px) {
    body[data-tema] .pa-404 { padding: 56px 16px 68px; }
    body[data-tema] .pa-404 .display { font-size: 32px; }
}

/* ---------------------------------------------------------------------------
   Activitat que no es pot obrir (blocada per calendari, per seqüència o mal
   configurada, `data-pa-blocat`).

   ⚠️ Amb `aria-disabled` tot sol queda EXACTAMENT igual que una de bona: manté el
   `cursor: pointer` del component, el hover que l'aixeca i l'anell de focus. Qui hi
   clica no veu res i no rep cap explicació.

   ⚠️ Va al FINAL del fitxer a posta: `body[data-tema] .pa-aula [data-pa-blocat]`
   EMPATA en especificitat (0,3,1) amb `body[data-tema] .pa-aula .pa-sim-card__cta` i
   companyia, així que qui mana és l'ordre — més amunt, el `cursor: pointer` del
   component tornaria a guanyar i no s'hauria arreglat res.
   --------------------------------------------------------------------------- */
body[data-tema] .pa-aula [data-pa-blocat] { cursor: not-allowed; opacity: .62; }
body[data-tema] .pa-aula [data-pa-blocat]:hover { transform: none; text-decoration: none; }
body[data-tema] .pa-aula .pa-sim-video[data-pa-blocat]:hover { box-shadow: var(--shadow-1); }
body[data-tema] .pa-aula .pa-sim-card__cta[data-pa-blocat] { color: var(--fg-3); }

/* ---------------------------------------------------------------------------
   Activitat ja resolta i, per tant, tancada (`data-pa-fet`).

   ⚠️ NO és una activitat blocada: aquella encara no s'ha pogut fer i s'atenua amb
   el cadenat; aquesta està FETA i es queda amb el seu verd i el seu detall. L'únic
   que perd és l'afordança de clic, perquè no s'obre.

   ⚠️ Va DESPRÉS de `[data-pa-blocat]` pel mateix motiu que aquell va al final:
   `body[data-tema] .pa-aula [data-pa-fet]` empata en especificitat (0,3,1) amb el
   `cursor: pointer` dels components i qui mana és l'ordre.
   --------------------------------------------------------------------------- */
body[data-tema] .pa-aula [data-pa-fet] { cursor: default; }
body[data-tema] .pa-aula [data-pa-fet]:hover { transform: none; text-decoration: none; }
body[data-tema] .pa-aula .pa-idx-act[data-pa-fet]:hover { background: var(--bg-1); }