/* ============================================================
   Portal Col·laboradors — Estils específics
   Complementa els estils globals del tema (style.css)
   ============================================================ */

/* ── DASHBOARD HEADER ──────────────────────────────────────── */

.es-dashboard-header {
    background: linear-gradient(135deg, #1D3334, #3A595B);
    padding: 2.5rem 1.5rem;
}

.es-dashboard-header__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.es-dashboard-eyebrow {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(229, 221, 209, 0.7);
    margin-bottom: 0.25rem;
}

.es-dashboard-title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 800;
    color: #E5DDD1;
    margin: 0;
}

/* ── BANNER RENOVACIÓ ──────────────────────────────────────── */

.es-banner-renovacio {
    background: #FFF8E1;
    border-left: 4px solid #B7770D;
    padding: 1rem 1.5rem;
    font-size: 0.9375rem;
    color: #2F2F2F;
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.es-banner-renovacio a {
    color: #B7770D;
    font-weight: 700;
    text-decoration: underline;
}

.es-error-magic-link {
    background: #FAECE7;
    border-left: 3px solid #DA5026;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    color: #2F2F2F;
    margin: 0 auto 1rem;
    max-width: 61.6rem;
}

/* ── ONBOARDING PORTAL COL·LABORADORS (/portal-sacra/) ─────── */

.es-onboarding-wrap {
    max-width: 760px;
    margin: 2rem auto;
    padding: 0 1rem;
}

/* ── ONBOARDING MODAL (es-onboarding-shell / es-ob-*) ───────────── */

html.es-onboarding-actiu,
body.es-onboarding-actiu {
    overflow: hidden;
    height: 100%;
}

.es-onboarding-shell {
    position: fixed;
    inset: 0;
    z-index: 100010;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 26, 27, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 2rem 1.5rem;
    overflow-y: auto;
}

/* Overlay: ample depèn del mode */
.es-onboarding-overlay {
    width: 100%;
    max-width: 800px;
    margin: auto;
}
.es-onboarding-overlay--narrow {
    max-width: 520px;
}
.es-onboarding-overlay--wide {
    max-width: 820px;
}

.es-onboarding-container {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4), 0 4px 20px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
    max-height: calc(100vh - 4rem);
    position: relative;
}

.es-ob-header {
    background: linear-gradient(135deg, #1D3334 0%, #3A595B 100%);
    padding: 1.25rem 1.75rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.es-ob-logo {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: #E5DDD1;
    letter-spacing: 0.1em;
    white-space: nowrap;
    flex-shrink: 0;
}

.es-ob-progress {
    flex: 1;
    height: 3px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    overflow: hidden;
}

.es-ob-progress-bar {
    height: 100%;
    background: #C4924A;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.es-ob-step-label {
    font-size: 0.7rem;
    color: rgba(229, 221, 209, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Pas interior: padding consistent */
.es-onboarding-step {
    padding: 1.75rem 2rem;
}

/* Pas contrasenya: centrat, no massa ample */
.es-onboarding-step--pw {
    padding: 2rem 2.5rem;
    max-width: 420px;
    margin: 0 auto;
}

.es-ob-content {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

/* Formulari de perfil — layout */
#es-perfil-form {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    margin-top: 0.25rem;
}
.es-pf-grid {
    display: grid;
    gap: 0.875rem;
    align-items: start;
}
.es-pf-grid--2  { grid-template-columns: 1fr 1fr; }
.es-pf-grid--3  { grid-template-columns: 1fr 1fr 1fr; }
.es-pf-grid--3c { grid-template-columns: 2fr 1.5fr 1fr; }
.es-pf-grid--4c { grid-template-columns: 2fr 1.2fr 0.8fr 1fr; }

/* Fila foto + dades */
.es-pf-grid--foto {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

/* Foto de perfil */
.es-pf-foto-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    width: 110px;
}
.es-pf-foto-preview {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #3A595B;
    display: block;
}
.es-pf-foto-placeholder {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: #e8f0ef;
    border: 3px solid #3A595B;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #3A595B;
}
.es-pf-foto-btn {
    font-size: 0.72rem;
    color: #3A595B;
    text-decoration: underline;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    background: transparent;
    border: none;
    text-align: center;
}
.es-pf-foto-btn:hover { color: #1D3334; }

@media (max-width: 640px) {
    .es-pf-grid--4c { grid-template-columns: 1fr 1fr; }
    .es-pf-grid--foto { flex-direction: column; align-items: center; }
    .es-pf-foto-wrap  { width: 100%; }
}
@media (max-width: 480px) {
    .es-pf-grid--2,
    .es-pf-grid--3,
    .es-pf-grid--3c,
    .es-pf-grid--4c { grid-template-columns: 1fr; }
    .es-onboarding-step--pw { padding: 1.5rem 1.25rem; }
}

.es-ob-eyebrow {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #C4924A;
    margin: 0;
}

.es-ob-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.6rem, 4vw, 2rem);
    font-weight: 700;
    color: #1D3334;
    line-height: 1.2;
    margin: 0;
}

.es-ob-subtitle {
    font-size: 0.875rem;
    color: #666;
    line-height: 1.65;
    margin: 0;
}

.es-ob-subtitle--compact {
    font-size: 0.8rem;
}

.es-ob-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.es-ob-field label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #2F2F2F;
}

.es-ob-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.es-ob-input-wrap input,
.es-ob-field input[type="text"],
.es-ob-field input[type="email"],
.es-ob-field input[type="password"],
.es-ob-field input[type="tel"],
.es-ob-field input[type="date"],
.es-ob-field select,
.es-ob-field textarea {
    width: 100%;
    padding: 0.75rem 0.875rem;
    border: 1.5px solid #E5DDD1;
    border-radius: 10px;
    font-size: 0.9375rem;
    font-family: 'DM Sans', system-ui, sans-serif;
    color: #2F2F2F;
    background: #FAFAF8;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
    box-sizing: border-box;
}

.es-ob-input-wrap input {
    padding-right: 3rem;
}

.es-ob-input-wrap input:focus,
.es-ob-field input:focus,
.es-ob-field select:focus,
.es-ob-field textarea:focus {
    border-color: #3A595B;
    box-shadow: 0 0 0 3px rgba(58, 89, 91, 0.12);
    background: #fff;
}

.es-ob-toggle-pw {
    position: absolute;
    right: 0.75rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    padding: 0.25rem;
    color: #999;
    line-height: 1;
}

.es-ob-field-error {
    font-size: 0.75rem;
    color: #DA5026;
    min-height: 1.1em;
    line-height: 1.4;
}

.es-ob-btn-primary {
    display: block;
    width: 100%;
    padding: 0.9rem 1.5rem;
    background: linear-gradient(135deg, #1D3334 0%, #3A595B 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 0.5rem;
    transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 16px rgba(29, 51, 52, 0.3);
    letter-spacing: 0.01em;
}

.es-ob-btn-primary:hover {
    opacity: 0.88;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(29, 51, 52, 0.4);
}

.es-ob-btn-primary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

@media (max-width: 480px) {
    .es-onboarding-shell {
        padding: 0;
        align-items: flex-start;
    }
    .es-onboarding-overlay {
        max-width: 100%;
    }
    .es-onboarding-container {
        border-radius: 0 0 20px 20px;
    }
    .es-ob-header {
        padding: 1rem 1.25rem;
    }
    .es-ob-step-label {
        display: none;
    }
    .es-onboarding-step {
        padding: 1.5rem 1.25rem;
    }
}

.es-onboarding-eyebrow {
    font-size: 11px;
    letter-spacing: 0.1em;
    color: #DA5026;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.es-onboarding-title {
    font-size: 1.75rem;
    font-weight: 500;
    color: #2F2F2F;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.es-onboarding-subtitle {
    color: #666;
    font-size: 1rem;
    margin-bottom: 2rem;
}

.es-onboarding-documents {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.es-onboarding-doc-card {
    background: #FFFFFF;
    border: 1px solid #E5DDD1;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.es-onboarding-doc-main {
    flex: 1;
    min-width: min(100%, 220px);
}

.es-onboarding-doc-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.es-onboarding-doc-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #E5DDD1;
    color: #2F2F2F;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.es-onboarding-doc-title {
    font-size: 1rem;
    font-weight: 500;
    color: #2F2F2F;
    margin: 0;
}

.es-onboarding-doc-desc {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    color: #666;
    line-height: 1.45;
}

.es-onboarding-no-docs {
    font-size: 0.9rem;
    color: #666;
    padding: 0.5rem 0;
}

.es-onboarding-doc-btn {
    padding: 8px 16px;
    border-radius: 8px;
    background: #3A595B;
    color: white;
    font-size: 0.875rem;
    text-decoration: none;
    white-space: nowrap;
}

.es-onboarding-doc-btn:hover {
    background: #2F2F2F;
    color: white;
}

.es-onboarding-doc-status {
    font-size: 0.8rem;
    color: #999;
    white-space: nowrap;
}

.es-onboarding-acceptance {
    background: #F7F3EE;
    border-radius: 12px;
    padding: 1.5rem;
}

.es-onboarding-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    margin-bottom: 0.75rem;
}

.es-onboarding-checkbox-label input {
    margin-top: 3px;
    flex-shrink: 0;
}

.es-onboarding-checkbox-label span {
    font-size: 0.9rem;
    color: #2F2F2F;
    line-height: 1.5;
}

.es-onboarding-checkbox-hint {
    font-size: 0.8rem;
    color: #999;
    margin-bottom: 1rem;
}

.es-onboarding-submit-btn {
    width: 100%;
    padding: 12px;
    background: #DA5026;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
}

.es-onboarding-submit-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.es-onboarding-error {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: #FAECE7;
    border-left: 3px solid #DA5026;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #2F2F2F;
}

@media (max-width: 600px) {
    .es-onboarding-doc-card {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Onboarding 4 passos */
.es-onboarding-step {
    animation: esFadeIn 0.3s ease;
}

@keyframes esFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.es-onboarding-subtitle--compact {
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

.es-onboarding-no-docs-inline {
    color: #999;
    font-size: 0.9rem;
    margin: 0 0 0.5rem;
}

.es-step-3-next {
    margin-top: 1.5rem;
}

.es-perfil-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1.5rem 0;
}

.es-perfil-chip {
    padding: 10px 20px;
    border-radius: 24px;
    border: 2px solid #E5DDD1;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.es-perfil-chip--active {
    border-color: #3A595B;
    background: #F0F5F5;
    color: #3A595B;
    font-weight: 500;
}

.es-field-error {
    display: block;
    font-size: 12px;
    color: #DA5026;
    margin-top: 4px;
    min-height: 16px;
}

.es-password-form {
    max-width: 480px;
}

.es-password-field {
    margin-bottom: 1.25rem;
}

.es-password-field label {
    display: block;
    font-size: 13px;
    color: #666;
    margin-bottom: 6px;
    font-weight: 500;
}

.es-password-field input {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    border: 1px solid #E5DDD1;
    border-radius: 8px;
    font-size: 1rem;
}

@media (max-width: 480px) {
    .es-perfil-chips {
        flex-direction: column;
    }

    .es-perfil-chip {
        width: 100%;
        box-sizing: border-box;
        justify-content: flex-start;
    }
}

/* ── GRID DE SECCIONS ──────────────────────────────────────── */

.es-dashboard-grid {
    max-width: 1200px;
    margin: 2.5rem auto;
    padding: 0 1.5rem 4rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1.5rem;
}

/* ── SECCIÓ INDIVIDUAL ─────────────────────────────────────── */

.es-dashboard-section {
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(58, 89, 75, 0.12);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.es-dashboard-section:hover {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}

.es-section-header {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(58, 89, 75, 0.1);
    background: rgba(58, 89, 75, 0.03);
}

.es-section-header h2 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #2F2F2F;
    margin: 0;
}

.es-section-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.es-section-body {
    padding: 1.5rem;
}

.es-coming-soon {
    color: rgba(47, 47, 47, 0.5);
    font-style: italic;
    font-size: 0.9375rem;
    text-align: center;
    padding: 2rem 1.5rem;
}

/* ── PANELL SENSE ROLS ─────────────────────────────────────── */

.es-dashboard-empty {
    max-width: 600px;
    margin: 4rem auto;
    text-align: center;
    padding: 3rem 2rem;
    background: #F7F3EE;
    border-radius: 16px;
    color: rgba(47, 47, 47, 0.7);
}

.es-dashboard-empty p {
    font-size: 1.0625rem;
    line-height: 1.7;
    margin-bottom: 0.5rem;
}

/* ── INPUTS ONBOARDING ─────────────────────────────────────── */

.portal-input {
    width: 100%;
    border: none;
    border-bottom: 1.5px solid rgba(58, 89, 75, 0.25);
    border-radius: 0;
    padding: 0.875rem 0.25rem;
    background: transparent;
    font-size: 1rem;
    color: #2F2F2F;
    transition: border-color 0.3s ease;
    outline: none;
}

.portal-input:focus {
    border-bottom-color: #DA5026;
}

.portal-label {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(47, 47, 47, 0.6);
    margin-bottom: 0.25rem;
    display: block;
}

/* ── CARDS PERFIL (onboarding) ─────────────────────────────── */

.perfil-card {
    border: 1.5px solid rgba(58, 89, 75, 0.2);
    border-radius: 16px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.25s ease;
    background: rgba(255, 255, 255, 0.5);
    user-select: none;
}

.perfil-card.selected {
    border-color: #3A595B;
    background: rgba(58, 89, 75, 0.06);
    box-shadow: 0 0 0 3px rgba(58, 89, 75, 0.12);
}

/* ── BLOCS DINÀMICS (onboarding) ───────────────────────────── */

.portal-bloc {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
}

.portal-bloc.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
    max-height: 2000px;
}

/* Portal wizard pas 2n — tria curta nous usuaris */

.es-portal-tria {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.es-portal-tria__item {
    text-align: left;
    padding: 1rem 1.15rem;
    border-radius: 14px;
    border: 1px solid rgba(58, 89, 75, 0.18);
    background: rgba(255, 255, 255, 0.45);
}

.es-portal-tria__item .es-portal-tria__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    text-align: center;
    text-decoration: none;
}

.es-portal-tria__hint {
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgba(47, 47, 47, 0.65);
    margin: 0.5rem 0 0;
}

.es-portal-tria__hint a {
    color: #3a594b;
    font-weight: 600;
}

/* ── WIZARD MULTI-PAS ──────────────────────────────────────── */

.es-wizard-card {
    padding: clamp(2.5rem, 4vw, 3.5rem);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.3));
    backdrop-filter: blur(30px) saturate(150%);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

/* Progress dots */
.es-wizard-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2.5rem;
}

.es-step-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(58, 89, 75, 0.2);
    transition: all 0.35s ease;
    flex-shrink: 0;
}

.es-step-dot.active {
    background: #3a594b;
    transform: scale(1.25);
}

.es-step-line {
    width: 3rem;
    height: 2px;
    background: rgba(58, 89, 75, 0.15);
    margin: 0 0.5rem;
}

/* Steps */
.es-wizard-step {
    display: none;
}

.es-wizard-step.active {
    display: block;
    animation: esWizardFadeIn 0.3s ease;
}

@keyframes esWizardFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Back button */
.es-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(47, 47, 47, 0.55);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-bottom: 1.5rem;
    transition: color 0.2s;
}

.es-back-btn:hover { color: #3a594b; }

.es-back-btn svg {
    width: 1rem;
    height: 1rem;
}

/* Icon header */
.es-wizard-icon-header {
    text-align: center;
    margin-bottom: 2rem;
}

.es-wizard-icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(58, 89, 75, 0.12), rgba(58, 89, 75, 0.06));
    border: 2px solid rgba(58, 89, 75, 0.25);
    margin-bottom: 1.25rem;
}

.es-wizard-icon-circle svg {
    width: 2rem;
    height: 2rem;
    color: #3a594b;
}

.es-wizard-icon-circle.es-icon-success {
    background: linear-gradient(135deg, rgba(58, 89, 75, 0.18), rgba(58, 89, 75, 0.08));
    border-color: rgba(58, 89, 75, 0.45);
}

.es-wizard-title {
    font-size: clamp(1.375rem, 2.2vw, 1.75rem);
    font-weight: 800;
    color: #2f2f2f;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.es-wizard-subtitle {
    font-size: 1rem;
    color: rgba(47, 47, 47, 0.7);
    line-height: 1.55;
    max-width: 28rem;
    margin: 0 auto;
}

/* Actions (botons principals) */
.es-wizard-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.es-wizard-btn-full {
    width: 100% !important;
    justify-content: center !important;
}

/* Fields */
.es-field {
    margin-bottom: 1.5rem;
}

.es-field label {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #2f2f2f;
    margin-bottom: 0.5rem;
}

.es-field-icon {
    position: relative;
}

.es-field-icon > svg {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.25rem;
    height: 1.25rem;
    color: rgba(58, 89, 75, 0.45);
    pointer-events: none;
}

.es-field-icon input,
.es-field-icon select {
    width: 100%;
    padding: 1rem 1.25rem 1rem 3.5rem;
    border: 1px solid rgba(58, 89, 75, 0.25);
    border-radius: 12px;
    font-size: 1rem;
    color: #2f2f2f;
    background: rgba(255, 255, 255, 0.6);
    transition: border-color 0.25s, background 0.25s;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}

.es-field-icon input:focus,
.es-field-icon select:focus {
    border-color: #3a594b;
    background: rgba(255, 255, 255, 0.92);
}

.es-field textarea {
    width: 100%;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(58, 89, 75, 0.25);
    border-radius: 12px;
    font-size: 1rem;
    color: #2f2f2f;
    background: rgba(255, 255, 255, 0.6);
    transition: border-color 0.25s, background 0.25s;
    outline: none;
    resize: vertical;
    font-family: inherit;
    box-sizing: border-box;
}

.es-field textarea:focus {
    border-color: #3a594b;
    background: rgba(255, 255, 255, 0.92);
}

/* Row (remember + forgot) */
.es-field-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.es-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    color: rgba(47, 47, 47, 0.8);
    cursor: pointer;
}

.es-checkbox-label input {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: #3a594b;
}

.es-link {
    font-size: 0.9375rem;
    color: #3a594b;
    text-decoration: none;
    font-weight: 600;
}

.es-link:hover { text-decoration: underline; }

/* Feedback */
.es-feedback {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.es-feedback--error {
    background: rgba(192, 57, 43, 0.08);
    color: #C0392B;
    border: 1px solid rgba(192, 57, 43, 0.2);
}

.es-feedback--success {
    background: rgba(58, 89, 75, 0.08);
    color: #2D6A4F;
    border: 1px solid rgba(58, 89, 75, 0.2);
}

/* ── CHIPS MULTISELECCIÓ TIPUS COL·LABORACIÓ ───────────────── */

.es-tipus-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
}
.es-tipus-grid::-webkit-scrollbar { display: none; }

.es-tipus-chip {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

.es-tipus-chip input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.es-tipus-chip span {
    display: inline-block;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    font-size: 0.825rem;
    font-weight: 500;
    border: 1.5px solid rgba(58, 89, 75, 0.25);
    background: rgba(255, 255, 255, 0.6);
    color: rgba(47, 47, 47, 0.75);
    transition: all 0.2s ease;
    user-select: none;
    white-space: nowrap;
}

.es-tipus-chip:hover span {
    border-color: rgba(58, 89, 75, 0.5);
    background: rgba(58, 89, 75, 0.05);
    color: #2f2f2f;
}

.es-tipus-chip input:checked + span {
    background: #3a594b;
    border-color: #3a594b;
    color: #fff;
    box-shadow: 0 2px 8px rgba(58, 89, 75, 0.25);
}

/* ── PROFILE CARDS ──────────────────────────────────────────── */

.es-profile-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.es-profile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem 0.75rem;
    background: rgba(255, 255, 255, 0.7);
    border: 1.5px solid rgba(58, 89, 75, 0.18);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.es-profile-card:hover {
    border-color: rgba(58, 89, 75, 0.45);
    background: rgba(58, 89, 75, 0.05);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(58, 89, 75, 0.12);
}

.es-profile-card.is-selected {
    border-color: #3a594b;
    background: rgba(58, 89, 75, 0.08);
    box-shadow: 0 0 0 3px rgba(58, 89, 75, 0.15);
}

.es-profile-icon-wrap {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(58, 89, 75, 0.15), rgba(58, 89, 75, 0.07));
    border: 1px solid rgba(58, 89, 75, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.es-profile-icon-wrap svg {
    width: 1.25rem;
    height: 1.25rem;
    color: #3a594b;
}

.es-profile-name {
    font-size: 0.875rem;
    font-weight: 700;
    color: #2f2f2f;
    line-height: 1.2;
}

.es-profile-desc {
    font-size: 0.775rem;
    color: rgba(47, 47, 47, 0.55);
    line-height: 1.3;
}

/* ── INTENT CARDS ────────────────────────────────────────────── */

.es-intent-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 0.5rem;
}

.es-intent-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.5rem 1.25rem;
    background: rgba(255, 255, 255, 0.7);
    border: 1.5px solid rgba(58, 89, 75, 0.18);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.es-intent-card:hover {
    border-color: #3a594b;
    background: rgba(58, 89, 75, 0.05);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(58, 89, 75, 0.14);
}

.es-intent-card.is-selected {
    border-color: #3a594b;
    background: rgba(58, 89, 75, 0.08);
    box-shadow: 0 0 0 3px rgba(58, 89, 75, 0.15);
}

.es-intent-icon-wrap {
    width: 3rem;
    height: 3rem;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(58, 89, 75, 0.15), rgba(58, 89, 75, 0.07));
    border: 1px solid rgba(58, 89, 75, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.es-intent-icon-wrap svg {
    width: 1.375rem;
    height: 1.375rem;
    color: #3a594b;
}

.es-intent-card h4 {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #2f2f2f;
    margin: 0;
    line-height: 1.3;
}

.es-intent-card p {
    font-size: 0.825rem;
    color: rgba(47, 47, 47, 0.6);
    margin: 0;
    line-height: 1.45;
}

/* ── FORM SECTIONS (condicionals) ────────────────────────────── */

.es-form-section {
    display: none;
}

/* ── RADIO GROUP ─────────────────────────────────────────────── */

.es-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.es-radio-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1.5px solid rgba(58, 89, 75, 0.25);
    background: rgba(255, 255, 255, 0.6);
    color: rgba(47, 47, 47, 0.75);
    cursor: pointer;
    transition: all 0.2s ease;
}

.es-radio-label:has(input:checked) {
    background: #3a594b;
    border-color: #3a594b;
    color: #fff;
}

.es-radio-label input[type="radio"] {
    display: none;
}

/* ── LABEL OPCIONAL ──────────────────────────────────────────── */

.es-label-optional {
    font-size: 0.8em;
    font-weight: 400;
    color: rgba(47, 47, 47, 0.5);
}

/* ── STEP DONE ───────────────────────────────────────────────── */

.es-step-done-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem 0 0.5rem;
}

.es-done-check {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(58, 89, 75, 0.15), rgba(58, 89, 75, 0.07));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    animation: es-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.es-done-check svg {
    width: 2.25rem;
    height: 2.25rem;
    color: #3a594b;
}

@keyframes es-pop {
    from { transform: scale(0.5); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════
   OVERLAY FULL-SCREEN — FORMULARI PREMIUM
   ══════════════════════════════════════════════════════════════ */

/* Contenidor principal */
.es-ovl {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: linear-gradient(145deg, #0f2420 0%, #1a3530 40%, #1D3334 100%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}
.es-ovl.is-open {
    opacity: 1;
    pointer-events: all;
    visibility: visible;
}

/* ── Header ── */
.es-ovl__header {
    position: relative;
    flex-shrink: 0;
}
.es-ovl__progress-track {
    height: 3px;
    background: rgba(255,255,255,0.1);
    width: 100%;
}
.es-ovl__progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #7cb89a, #a8d5b8);
    width: 20%;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0 2px 2px 0;
}
.es-ovl__header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
}
.es-ovl__step-label {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(245, 240, 235, 0.5);
}
.es-ovl__close {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: rgba(245,240,235,0.7);
}
.es-ovl__close:hover {
    background: rgba(255,255,255,0.15);
    color: #f5f0eb;
}
.es-ovl__close svg { width: 1.125rem; height: 1.125rem; }

/* ── Body / Steps ── */
.es-ovl__body {
    flex: 1;
    overflow: hidden;
    position: relative;
}
.es-ovl__step {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    opacity: 0;
    pointer-events: none;
    transform: translateX(60px);
    transition: opacity 0.38s ease, transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
}
.es-ovl__step.active {
    opacity: 1;
    pointer-events: all;
    transform: translateX(0);
}
.es-ovl__step.exit-left {
    opacity: 0;
    transform: translateX(-60px);
}

.es-ovl__step-inner {
    width: 100%;
    max-width: 520px;
    position: relative;
}
.es-ovl__step-inner--wide { max-width: 780px; }
.es-ovl__step-inner--center {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Número de fons gran */
.es-ovl__bg-num {
    position: absolute;
    top: -2.5rem;
    left: -1rem;
    font-size: clamp(5rem, 15vw, 10rem);
    font-weight: 900;
    color: rgba(255,255,255,0.035);
    line-height: 1;
    pointer-events: none;
    user-select: none;
    letter-spacing: -0.05em;
}

/* Textos */
.es-ovl__eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #7cb89a;
    margin-bottom: 0.5rem;
}
.es-ovl__question {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 800;
    color: #f5f0eb;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}
.es-ovl__hint {
    font-size: 0.9375rem;
    color: rgba(245,240,235,0.55);
    margin-bottom: 2rem;
    line-height: 1.5;
}
.es-ovl__optional {
    font-weight: 400;
    opacity: 0.6;
    font-size: 0.85em;
}
.es-ovl__error {
    color: #f4a261;
    font-size: 0.875rem;
    margin-bottom: 1rem;
    padding: 0.6rem 0.875rem;
    background: rgba(244,162,97,0.1);
    border-radius: 8px;
    border-left: 3px solid #f4a261;
}

/* ── Camps (floating label sobre línia) ── */
.es-ovl__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.5rem;
}
.es-ovl__field {
    position: relative;
    margin-bottom: 1.75rem;
}
.es-ovl__field--mt { margin-top: 1.25rem; }
.es-ovl__input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid rgba(245,240,235,0.2);
    color: #f5f0eb;
    font-size: 1.0625rem;
    font-weight: 500;
    padding: 0.6rem 0 0.4rem;
    outline: none;
    transition: border-color 0.2s ease;
    font-family: inherit;
}
.es-ovl__input[readonly] { opacity: 0.5; cursor: default; }
.es-ovl__input:focus,
.es-ovl__input:not(:placeholder-shown) {
    border-color: #7cb89a;
}
.es-ovl__field label {
    position: absolute;
    top: 0.6rem;
    left: 0;
    font-size: 0.875rem;
    color: rgba(245,240,235,0.45);
    pointer-events: none;
    transition: all 0.2s ease;
}
.es-ovl__input:focus + label,
.es-ovl__input:not(:placeholder-shown) + label {
    top: -0.9rem;
    font-size: 0.75rem;
    color: #7cb89a;
}

/* ── Botons ── */
.es-ovl__next {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 2rem;
    background: linear-gradient(135deg, #3a594b, #4a7060);
    color: #f5f0eb;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    transition: all 0.22s ease;
    box-shadow: 0 4px 20px rgba(58,89,75,0.4);
    margin-top: 0.5rem;
}
.es-ovl__next:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(58,89,75,0.5);
}
.es-ovl__next svg { width: 1.125rem; height: 1.125rem; }

/* Ressaltat automàtic quan s'han introduït 9 dígits del telèfon */
@keyframes es-pulse-btn {
    0%   { box-shadow: 0 4px 20px rgba(58,89,75,0.4), 0 0 0 0 rgba(58,89,75,0.6); transform: translateY(0); }
    40%  { box-shadow: 0 6px 28px rgba(58,89,75,0.5), 0 0 0 10px rgba(58,89,75,0); transform: translateY(-3px); }
    60%  { box-shadow: 0 6px 28px rgba(58,89,75,0.5), 0 0 0 0 rgba(58,89,75,0); transform: translateY(-3px); }
    100% { box-shadow: 0 4px 20px rgba(58,89,75,0.4), 0 0 0 0 rgba(58,89,75,0); transform: translateY(0); }
}
.es-ovl__next.es-btn-pulse {
    animation: es-pulse-btn 0.6s ease 0s 3;
    background: linear-gradient(135deg, #2a7a58, #3a8a6a) !important;
    outline: 3px solid rgba(124,209,164,0.5);
    outline-offset: 3px;
}
.es-ovl__skip {
    display: block;
    margin-top: 1rem;
    background: none;
    border: none;
    color: rgba(245,240,235,0.35);
    font-size: 0.875rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
    padding: 0;
}
.es-ovl__skip:hover { color: rgba(245,240,235,0.65); }

/* ── Disciplines grid ── */
.es-disc-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.es-disc-chip {
    cursor: pointer;
}
.es-disc-chip input { display: none; }
.es-disc-chip span {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1.5px solid rgba(245,240,235,0.2);
    color: rgba(245,240,235,0.65);
    transition: all 0.18s ease;
    white-space: nowrap;
    user-select: none;
}
.es-disc-chip:hover span {
    border-color: rgba(124,184,154,0.5);
    color: #f5f0eb;
    background: rgba(124,184,154,0.08);
}
.es-disc-chip input:checked + span {
    background: #3a594b;
    border-color: #7cb89a;
    color: #f5f0eb;
    box-shadow: 0 2px 10px rgba(58,89,75,0.4);
}

/* ── Matriu disponibilitat ── */
.es-avail {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 1.5rem;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
}
.es-avail__row {
    display: grid;
    grid-template-columns: 120px repeat(4, 1fr);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.es-avail__row:last-child { border-bottom: none; }
.es-avail__row--header {
    background: rgba(255,255,255,0.04);
}
.es-avail__corner {
    padding: 0.875rem 1rem;
}
.es-avail__col-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 0.5rem;
    text-align: center;
    border-left: 1px solid rgba(255,255,255,0.06);
}
.es-avail__col-label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: rgba(245,240,235,0.75);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.es-avail__col-hours {
    font-size: 0.75rem;
    color: rgba(245,240,235,0.35);
    margin-top: 0.1rem;
}
.es-avail__row-head {
    padding: 0 1rem;
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(245,240,235,0.65);
}
.es-avail__cell {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-left: 1px solid rgba(255,255,255,0.06);
    cursor: pointer;
}
.es-avail__cell input { display: none; }
.es-avail__tile {
    width: 100%;
    min-height: 2.75rem;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    border: 1.5px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.18s ease;
}
.es-avail__tick { width: 1rem; height: 1rem; opacity: 0; color: #f5f0eb; transition: opacity 0.15s; }
.es-avail__cell:hover .es-avail__tile {
    background: rgba(124,184,154,0.15);
    border-color: rgba(124,184,154,0.4);
}
.es-avail__cell input:checked + .es-avail__tile {
    background: linear-gradient(135deg, #3a594b, #4a7060);
    border-color: #7cb89a;
    box-shadow: 0 2px 10px rgba(58,89,75,0.4);
}
.es-avail__cell input:checked + .es-avail__tile .es-avail__tick {
    opacity: 1;
}

/* Botó seleccionar tot */
.es-ovl__toggle-all {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    color: rgba(245,240,235,0.55);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 1.25rem;
}
.es-ovl__toggle-all:hover {
    background: rgba(255,255,255,0.12);
    color: #f5f0eb;
}
.es-ovl__toggle-all svg { width: 0.9rem; height: 0.9rem; }

/* ── Binary choice (Àrea Social) ── */
.es-binary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem;
    margin-top: 0.5rem;
}
.es-binary-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 1.375rem 1.25rem;
    background: rgba(255,255,255,0.05);
    border: 1.5px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.22s ease;
    text-align: left;
}
.es-binary-card:last-child {
    grid-column: 1 / -1;
}
.es-binary-card:hover {
    border-color: rgba(124,184,154,0.5);
    background: rgba(124,184,154,0.08);
    transform: translateY(-2px);
}
.es-binary-card.is-selected {
    border-color: #7cb89a;
    background: rgba(58,89,75,0.3);
}
.es-binary-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    background: rgba(124,184,154,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
}
.es-binary-icon svg { width: 1.25rem; height: 1.25rem; color: #7cb89a; }
.es-binary-card strong {
    display: block;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #f5f0eb;
}
.es-binary-card span {
    font-size: 0.8125rem;
    color: rgba(245,240,235,0.5);
    line-height: 1.4;
}

/* ── Foto upload ── */
.es-photo-drop {
    margin-bottom: 1.5rem;
    cursor: pointer;
}
.es-photo-drop__preview {
    border: 2px dashed rgba(255,255,255,0.15);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    text-align: center;
    transition: all 0.22s ease;
    background: rgba(255,255,255,0.03);
    position: relative;
    overflow: hidden;
}
.es-photo-drop__preview:hover,
.es-photo-drop.drag-over .es-photo-drop__preview {
    border-color: rgba(124,184,154,0.5);
    background: rgba(124,184,154,0.07);
}
.es-photo-drop__placeholder svg { width: 2.5rem; height: 2.5rem; color: rgba(245,240,235,0.3); margin-bottom: 0.75rem; }
.es-photo-drop__placeholder p { color: rgba(245,240,235,0.65); font-size: 0.9375rem; font-weight: 500; margin-bottom: 0.25rem; }
.es-photo-drop__placeholder span { color: rgba(245,240,235,0.3); font-size: 0.8125rem; }
#pb-photo-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 12px;
}

/* ── Done / Confirmació ── */
.es-ovl__done-check {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: rgba(124,184,154,0.15);
    border: 2px solid rgba(124,184,154,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: es-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.es-ovl__done-check svg { width: 2.5rem; height: 2.5rem; color: #7cb89a; }
.es-ovl__close-done {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    margin-top: 2rem;
    background: rgba(255,255,255,0.1);
    border: 1.5px solid rgba(255,255,255,0.2);
    border-radius: 999px;
    color: #f5f0eb;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.es-ovl__close-done:hover { background: rgba(255,255,255,0.18); }

/* ── Footer: previous + dots ── */
.es-ovl__footer {
    flex-shrink: 0;
    padding: 1rem 1.5rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.es-ovl__prev {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(245,240,235,0.5);
    transition: all 0.2s ease;
}
.es-ovl__prev:hover { background: rgba(255,255,255,0.14); color: #f5f0eb; }
.es-ovl__prev[disabled] { opacity: 0.25; pointer-events: none; }
.es-ovl__prev svg { width: 1.125rem; height: 1.125rem; }

.es-ovl__dots {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.es-ovl__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    transition: all 0.25s ease;
}
.es-ovl__dot.active {
    background: #7cb89a;
    width: 20px;
    border-radius: 3px;
}

/* ══════════════════════════════════════════════════════════════
   OVERLAY — 2 COLUMNES (FORMULARI + INSPIRACIÓ)
   ══════════════════════════════════════════════════════════════ */

.es-ovl__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    min-height: calc(100vh - 9rem);
    align-items: center;
}
.es-ovl__layout--wide { max-width: 980px; }

.es-ovl__col-form {
    padding: 2rem 3rem 2rem 0;
    border-right: 1px solid rgba(255,255,255,0.07);
    position: relative;
}

.es-ovl__col-inspire {
    padding: 2rem 0 2rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Icona de la columna d'inspiració */
.es-ovl__inspire-icon {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(124,184,154,0.25), rgba(124,184,154,0.08));
    border: 1px solid rgba(124,184,154,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
}
.es-ovl__inspire-icon svg { width: 1.75rem; height: 1.75rem; color: #7cb89a; }

.es-ovl__inspire-title {
    font-size: 1.625rem;
    font-weight: 700;
    color: #f5f0eb;
    line-height: 1.25;
    margin: 0;
}

.es-ovl__inspire-text {
    font-size: 1rem;
    color: rgba(245,240,235,0.65);
    line-height: 1.65;
    margin: 0;
}

.es-ovl__inspire-stats {
    display: flex;
    gap: 2rem;
    margin-top: 0.5rem;
}
.es-ovl__inspire-stat { display: flex; flex-direction: column; gap: 0.2rem; }
.es-ovl__inspire-num  { font-size: 2rem; font-weight: 800; color: #7cb89a; line-height: 1; }
.es-ovl__inspire-label { font-size: 0.8rem; color: rgba(245,240,235,0.5); text-transform: uppercase; letter-spacing: 0.08em; }

.es-ovl__inspire-quote {
    border-left: 3px solid rgba(124,184,154,0.4);
    margin: 0;
    padding-left: 1rem;
    font-style: italic;
    font-size: 0.95rem;
    color: rgba(245,240,235,0.55);
    line-height: 1.6;
}

/* Error a nivell de camp */
.es-ovl__field-error {
    display: block;
    font-size: 0.8rem;
    color: #f87171;
    margin-top: 0.35rem;
    padding-left: 0.25rem;
}

/* Etiqueta per sobre de grups de chips */
.es-ovl__field-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: #f5f0eb;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 0.6rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid rgba(124,184,154,0.3);
}
.es-mt-1 { margin-top: 1.5rem; }

/* Columna inspire amb botons al fons */
.es-ovl__col-inspire--actions {
    justify-content: space-between;
}
.es-ovl__inspire-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255,255,255,0.07);
}
/* Botó Continua adaptat a columna dreta */
.es-ovl__inspire-actions .es-ovl__next {
    width: 100%;
    justify-content: center;
}
.es-ovl__inspire-actions .es-ovl__skip {
    text-align: center;
}

/* Chips ràdio (selecció única) amb estil igual als checkbox */
.es-disc-chip input[type="radio"]:checked + span,
.es-disc-chip:has(input[type="radio"]:checked) span {
    background: rgba(124,184,154,0.22);
    border-color: #7cb89a;
    color: #7cb89a;
}

/* ── ÀREA SOCIAL (columna dreta del pas 3) ──────────────────── */
.es-ovl__area-social {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 1rem;
    padding: 1.1rem 1.25rem;
}
.es-ovl__area-social-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(245,240,235,0.8);
    margin: 0 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.es-ovl__area-social-title svg { width: 1rem; height: 1rem; color: #7cb89a; flex-shrink: 0; }
.es-ovl__area-social-hint {
    font-size: 0.78rem;
    color: rgba(245,240,235,0.35);
    margin: 0.5rem 0 0;
    line-height: 1.4;
}

.es-area-toggle {
    display: flex;
    gap: 0.5rem;
}
.es-area-btn {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border-radius: 2rem;
    border: 1px solid rgba(255,255,255,0.15);
    background: transparent;
    color: rgba(245,240,235,0.6);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}
.es-area-btn:hover { border-color: rgba(255,255,255,0.3); color: #f5f0eb; }
.es-area-btn.is-selected {
    background: rgba(124,184,154,0.18);
    border-color: #7cb89a;
    color: #7cb89a;
}

/* ── FOTO COMPACTA ──────────────────────────────────────────── */
.es-ovl__photo-compact { margin-top: 0.25rem; }

.es-ovl__photo-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 1.1rem;
    border-radius: 2rem;
    border: 1px dashed rgba(255,255,255,0.2);
    background: transparent;
    color: rgba(245,240,235,0.55);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    justify-content: center;
}
.es-ovl__photo-btn svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.es-ovl__photo-btn:hover { border-color: rgba(124,184,154,0.5); color: #7cb89a; }

.es-ovl__photo-preview-img {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #7cb89a;
    display: block;
    margin: 0.75rem auto 0;
}

/* ══════════════════════════════════════════════════════════════
   OVERLAY — CORRECCIONS COMPACTES + TEXTOS FORÇATS
   ══════════════════════════════════════════════════════════════ */

/* Títols no tallats: alinear des de dalt */
.es-ovl__step {
    align-items: flex-start !important;
    padding-top: 0 !important;
}
.es-ovl__layout,
.es-ovl__layout--wide {
    min-height: auto !important;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

/* Pas 1: centrat vertical (poc contingut) */
.es-ovl__step[data-step="1"] .es-ovl__layout {
    align-items: center;
    min-height: calc(100vh - 9rem) !important;
}

/* Pas 2: columna formulari més ampla (60/40) per reduir files de chips */
.es-ovl__step[data-step="2"] .es-ovl__layout,
.es-ovl__step[data-step="2"] .es-ovl__layout--wide {
    grid-template-columns: 3fr 2fr !important;
    max-width: 1040px !important;
}

/* Pas 2: separació entre blocs de chips */
.es-ovl__step[data-step="2"] .es-mt-1 {
    margin-top: 2rem !important;
    padding-top: 1.25rem !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
}

/* Pas 2: botons de la columna dreta baixats */
.es-ovl__step[data-step="2"] .es-ovl__inspire-actions {
    margin-top: 4.5rem !important;
    padding-top: 1.5rem !important;
}

/* ── COLORS GLOBALS DINS TOTS ELS OVERLAYS ──────────────────────────────── */
/* Etiquetes de camp (DISCIPLINES, PERFIL, VOLS QUE ET CONTACTEM, etc.) */
.es-ovl .es-ovl__field-label {
    color: #f5f0eb !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: .78rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .1em !important;
    border-bottom: 1px solid rgba(124,184,154,.25) !important;
    padding-bottom: .3rem !important;
    margin: 0 0 .6rem !important;
}
/* Títol i hint de l'Àrea Social (tant a columna esquerra com dreta) */
.es-ovl .es-ovl__area-social-title,
.es-ovl .es-ovl__area-social-title i,
.es-ovl .es-ovl__col-form .es-ovl__area-social-title,
.es-ovl .es-ovl__col-form .es-ovl__area-social-title i {
    color: #f5f0eb !important;
    opacity: 1 !important;
}
.es-ovl .es-ovl__area-social-hint,
.es-ovl .es-ovl__col-form .es-ovl__area-social-hint {
    color: rgba(245,240,235,.65) !important;
    opacity: 1 !important;
}
/* Text inspiració i cita */
.es-ovl .es-ovl__inspire-text {
    color: rgba(245,240,235,.85) !important;
    display: block !important;
}
.es-ovl .es-ovl__inspire-quote {
    color: rgba(245,240,235,.6) !important;
    border-left-color: rgba(124,184,154,.4) !important;
}

/* Bloc inspiració: estructura flex vertical */
.es-ovl__inspire-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
}

/* Columna dreta: flex column, accions just sota el contingut (no space-between) */
.es-ovl__col-inspire--actions {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1.25rem;
}
/* Les accions s'enganxen al final però amb un marge mínim */
.es-ovl__col-inspire--actions .es-ovl__inspire-actions {
    margin-top: auto;
}
.es-ovl__inspire-icon {
    margin-bottom: 0.5rem;
}

/* Separació extra entre títol i camps pas 1 */
.es-ovl__step[data-step="1"] .es-ovl__question {
    margin-bottom: 1.5rem !important;
}

/* Títol més petit per no desbordar */
.es-ovl__question {
    font-size: 1.625rem !important;
    margin-bottom: 0.75rem !important;
}
.es-ovl__eyebrow { margin-bottom: 0.15rem !important; }
.es-ovl__bg-num  { font-size: 6rem !important; top: -1rem !important; }

/* Columnes més compactes */
.es-ovl__col-form    { padding: 1rem 2rem 1rem 0 !important; }
.es-ovl__col-inspire { padding: 1rem 0 1rem 2rem !important; gap: 0.75rem !important; }

/* Icona inspire més petita */
.es-ovl__inspire-icon {
    width: 3rem !important;
    height: 3rem !important;
}
.es-ovl__inspire-icon svg { width: 1.3rem !important; height: 1.3rem !important; }
.es-ovl__inspire-title { font-size: 1.25rem !important; }

/* TEXTOS VISIBLES — força alta especificitat */
#es-ovl-professor-borsa .es-ovl__inspire-text {
    color: rgba(245,240,235,0.85) !important;
    display: block !important;
}
#es-ovl-professor-borsa .es-ovl__field-label,
#es-ovl-professor-borsa p.es-ovl__field-label {
    color: #f5f0eb !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}
#es-ovl-professor-borsa .es-ovl__inspire-quote {
    color: rgba(245,240,235,0.6) !important;
}
/* Títol Àrea Social — alabastre forçat */
#es-ovl-professor-borsa .es-ovl__area-social-title,
#es-ovl-professor-borsa .es-ovl__area-social-title p,
#es-ovl-professor-borsa p.es-ovl__area-social-title {
    color: #f5f0eb !important;
    opacity: 1 !important;
}
#es-ovl-professor-borsa .es-ovl__area-social-hint {
    color: rgba(245,240,235,0.55) !important;
}

/* Chips més compactes */
.es-disc-chip span {
    padding: 0.3rem 0.7rem !important;
    font-size: 0.8rem !important;
}
.es-disc-grid { gap: 0.35rem !important; margin-bottom: 0 !important; }
.es-mt-1 { margin-top: 1.25rem !important; }
/* Label ben separat del grup anterior i dels chips propis */
.es-ovl__field-label { margin: 0 0 0.6rem !important; }
.es-mt-1.es-ovl__field-label { margin-top: 1.4rem !important; }

/* Matriu disponibilitat més compacta */
.es-avail__tile {
    width: 2.4rem !important;
    height: 2.4rem !important;
}
.es-avail__col-label { font-size: 0.7rem !important; }
.es-avail__col-hours { font-size: 0.65rem !important; }
.es-avail__row-head  { font-size: 0.8rem !important; padding: 0 0.5rem !important; }
.es-avail__row       { gap: 0.35rem !important; margin-bottom: 0.35rem !important; }

/* Pas 1: fields més compactes */
.es-ovl__fields { gap: 0.75rem !important; }
.es-ovl__input  { padding: 0.7rem 0.875rem !important; font-size: 0.9rem !important; }
.es-ovl__field label { font-size: 0.8rem !important; }

/* Botó Continua més compacte */
.es-ovl__next {
    padding: 0.75rem 1.5rem !important;
    font-size: 0.9rem !important;
}

/* Stats inspire més compactes */
.es-ovl__inspire-num  { font-size: 1.5rem !important; }
.es-ovl__inspire-stats { gap: 1.25rem !important; margin-top: 0.25rem !important; }

/* Area social compacta */
.es-ovl__area-social { padding: 0.9rem 1rem !important; }

/* ── RESPONSIVE OVERLAY ──────────────────────────────────────── */
@media (max-width: 840px) {
    .es-ovl__layout,
    .es-ovl__layout--wide {
        grid-template-columns: 1fr;
        max-width: 520px;
    }
    .es-ovl__col-inspire { display: none; }
    .es-ovl__col-form    { border-right: none !important; padding: 0.75rem 0 !important; }
}
@media (max-width: 600px) {
    .es-ovl__fields { grid-template-columns: 1fr; }
    .es-ovl__question { font-size: 1.375rem !important; }
    .es-avail__row { grid-template-columns: 75px repeat(4, 1fr); }
    .es-avail__row-head { padding: 0 0.3rem; font-size: 0.7rem; }
}

/* ── RESPONSIVE ────────────────────────────────────────────── */

@media (max-width: 768px) {
    .es-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .es-dashboard-header__inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ══════════════════════════════════════════════════════════════
   PÀGINA COL·LABORA (/col·labora/)
   Estils complementaris (el CSS crític va inline al template)
   ══════════════════════════════════════════════════════════════ */

/* Ajust columna hero en desktop */
.es-col__hero-content { max-width: 660px; }

/* Efecte shimmer al botó submit en hover */
.es-col__submit::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
    transform: translateX(-100%);
    transition: transform .4s;
    border-radius: inherit;
}
.es-col__submit { position: relative; overflow: hidden; }
.es-col__submit:hover::after { transform: translateX(100%); }

/* Cards — border left accent animat */
.es-col__card {
    position: relative;
    border-left: 4px solid transparent;
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.es-col__card:hover { border-left-color: #DA5026; }

/* Chips focus visible (accessibilitat) */
.es-col__chip:focus-visible {
    outline: 2px solid #3A595B;
    outline-offset: 2px;
}

/* Input error state */
.es-col__input.has-error,
.es-col__textarea.has-error {
    border-color: #c0392b;
    box-shadow: 0 0 0 3px rgba(192,57,43,.1);
}

/* Stat band glow subtle */
.es-col__stat-num {
    text-shadow: 0 0 40px rgba(218,80,38,.25);
}

/* Confirm animació entrada */
@keyframes es-col-confirm-in {
    from { opacity: 0; transform: scale(.95); }
    to   { opacity: 1; transform: scale(1); }
}
#es-col-confirm[style*="block"] {
    animation: es-col-confirm-in .35s ease forwards;
}

/* Sale card tag hover glow */
.es-col__sale-card:hover .es-col__sale-name {
    color: #DA5026;
    transition: color .2s;
}

/* ── TARIFES ODOO — /participa/ ─────────────────────────────────────────── */

.es-tarifes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .75rem;
    margin: 0 0 .5rem;
}

.es-tarifa-card {
    background: #F7F3EE;
    border: 1px solid #E5DDD1;
    border-radius: 12px;
    padding: 1rem .875rem;
    text-align: center;
    transition: transform .2s, box-shadow .2s;
}

.es-tarifa-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(47,47,47,.08);
}

.es-tarifa-card--quota {
    border-color: rgba(58,89,75,.25);
    background: #fff;
}

.es-tarifa-nom {
    font-size: .78rem;
    color: #2F2F2F;
    font-weight: 600;
    margin-bottom: .4rem;
    line-height: 1.35;
}

.es-tarifa-desc {
    font-size: .72rem;
    color: #8A5443;
    margin-bottom: .5rem;
    line-height: 1.4;
}

.es-tarifa-preu {
    font-size: 1.6rem;
    font-weight: 800;
    color: #3A595B;
    line-height: 1;
}

.es-tarifa-preu span {
    font-size: .8rem;
    font-weight: 400;
    color: rgba(47,47,47,.5);
}

.es-tarifes-fallback {
    background: #F7F3EE;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    font-size: .9rem;
    margin-bottom: .5rem;
}

@media (max-width: 600px) {
    .es-tarifes-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ══════════════════════════════════════════════════════════════
   MODAL COL·LABORACIÓ — /participa/ (formulari professional)
   ══════════════════════════════════════════════════════════════ */

button.es-part__sel-card,
button.es-part__pro-cta,
button.es-part__btn-vidrian,
button.es-part__btn-siena,
a.es-part__btn-siena {
    font: inherit;
    cursor: pointer;
    border: none;
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
}

button.es-part__sel-card {
    width: 100%;
    text-align: center;
}

.es-collab-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
    align-items: center;
    justify-content: center;
    padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right))
        max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
    box-sizing: border-box;
    background: rgba(18, 22, 24, 0.48);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.es-collab-modal__panel {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: none;
    overflow: visible;
    background: #ffffff;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}

.es-collab-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.es-collab-modal__eyebrow {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: #3a595b;
    margin: 0 0 0.35rem;
}

.es-collab-modal__title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #2f2f2f;
    margin: 0;
    line-height: 1.2;
}

.es-collab-modal__close {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    color: rgba(47, 47, 47, 0.45);
    cursor: pointer;
    border-radius: 8px;
    transition: color 0.2s, background 0.2s;
}

.es-collab-modal__close:hover {
    color: #2f2f2f;
    background: rgba(47, 47, 47, 0.06);
}

.es-collab-modal__row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}

.es-collab-modal__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.es-collab-modal__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #2f2f2f;
}

.es-collab-modal__input,
.es-collab-modal__textarea {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid rgba(47, 47, 47, 0.18);
    border-radius: 8px;
    font-size: 0.9375rem;
    color: #2f2f2f;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.es-collab-modal__input.has-error,
.es-collab-modal__textarea.has-error {
    border-color: #b91c1c;
}

.es-collab-modal__textarea {
    resize: none;
    min-height: 3.2rem;
    line-height: 1.45;
}

.es-collab-modal__err {
    display: none;
    font-size: 0.8125rem;
    color: #b91c1c;
    font-weight: 600;
    margin: 0;
}

.es-collab-modal__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.25rem;
}

.es-chip-perfil {
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid rgba(47, 47, 47, 0.22);
    background: transparent;
    color: #2f2f2f;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.es-chip-perfil.is-active {
    background: #da5026;
    border-color: #da5026;
    color: #ffffff;
}

.es-chip-dia {
    padding: 0.35rem 0.65rem;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    border: 1.5px solid rgba(47, 47, 47, 0.22);
    background: transparent;
    color: #2f2f2f;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.es-chip-dia.is-active {
    background: #3a595b;
    border-color: #3a595b;
    color: #ffffff;
}

.es-collab-modal__checks {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.es-collab-modal__check {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: #2f2f2f;
    cursor: pointer;
}

.es-collab-modal__check input[type="checkbox"] {
    margin-top: 0.2rem;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    accent-color: #da5026;
}

.es-collab-modal__check span {
    font-weight: 500;
}

.es-collab-modal__legal {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.75rem 0 1rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: rgba(47, 47, 47, 0.75);
}

.es-collab-modal__legal input {
    margin-top: 0.2rem;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    accent-color: #da5026;
    cursor: pointer;
}

.es-collab-modal__legal a {
    color: #3a595b;
    font-weight: 600;
}

.es-collab-modal__submit {
    width: 100%;
    padding: 0.85rem 1.25rem;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    background: #da5026;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
}

.es-collab-modal__submit:hover:not(:disabled) {
    background: #c44420;
}

.es-collab-modal__submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.es-collab-modal__success {
    display: none;
    text-align: center;
    padding: 0.5rem 0 0.6rem;
}

.es-collab-modal__success-icon {
    width: 3.25rem;
    height: 3.25rem;
    margin: 0 auto 0.85rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(58, 89, 91, 0.25);
    background: rgba(58, 89, 91, 0.06);
    font-size: 1.55rem;
    font-weight: 900;
    line-height: 1;
    color: #3a595b;
}

.es-collab-modal__success-title {
    font-size: 1.18rem;
    font-weight: 800;
    color: #2f2f2f;
    margin: 0 0 0.5rem;
}

.es-collab-modal__success-text {
    font-size: 0.9375rem;
    color: rgba(47, 47, 47, 0.7);
    line-height: 1.58;
    margin: 0 0 1.25rem;
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
}

.es-collab-modal__success-close {
    padding: 0.68rem 1.4rem;
    border-radius: 10px;
    border: 1.5px solid rgba(47, 47, 47, 0.18);
    background: #fff;
    font-weight: 700;
    font-size: 0.9375rem;
    color: #2f2f2f;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}

.es-collab-modal__success-close:hover {
    background: #f7f3ee;
    border-color: rgba(47, 47, 47, 0.3);
    transform: translateY(-1px);
}

@media (max-width: 540px) {
    .es-collab-modal__panel {
        max-width: 95%;
    }

    .es-collab-modal__row2 {
        grid-template-columns: 1fr;
    }
}

/* Modal /participa/ — capçalera fosca + cos amb scroll intern */
.es-collab-modal__panel--participa {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: min(500px, 92vw);
    width: 100%;
    max-height: calc(100dvh - 2.5rem);
    padding: 0;
    border-radius: 22px;
    border: 1px solid rgba(58, 89, 91, 0.14);
    background: #fff;
    box-shadow:
        0 4px 6px rgba(47, 47, 47, 0.05),
        0 24px 56px rgba(15, 28, 30, 0.18);
    overflow: hidden;
    animation: esCmPanelIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.es-collab-modal__panel--participa.es-collab-modal__panel--flow-wide {
    max-width: min(600px, 94vw);
}

.es-collab-modal__panel--participa .es-cm-form-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 1.1rem 1.3rem 1.35rem;
    background: #fafaf8;
}

.es-collab-modal__panel--participa .es-collab-modal__success {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin: 0;
    padding: 1.5rem 1.35rem 1.6rem;
    background: #fafaf8;
}

@keyframes esCmPanelIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.97);
        filter: blur(2px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .es-collab-modal__panel--participa {
        animation: none;
    }
}

.es-collab-modal__panel--participa .es-collab-modal__head--participa {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    display: block;
    margin: 0;
    padding: 0.85rem 1.15rem 1.05rem;
    border-bottom: none;
    background: linear-gradient(165deg, #1a2628 0%, #243a3c 52%, #2c4548 100%);
    color: #fff;
}

.es-collab-modal__panel--participa .es-cm-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

.es-collab-modal__panel--participa .es-cm-step-idx {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #e0f0ec !important;
}

.es-collab-modal__panel--participa .es-collab-modal__head--participa .es-collab-modal__eyebrow {
    color: #7ecfc2 !important;
    margin: 0 0 0.3rem;
    font-weight: 700;
}

.es-collab-modal__panel--participa .es-collab-modal__head--participa .es-collab-modal__title {
    font-size: 1.28rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: #ffffff !important;
    line-height: 1.22;
}

.es-collab-modal__panel--participa .es-collab-modal__head--participa .es-collab-modal__close {
    position: static;
    flex-shrink: 0;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    font-size: 1.35rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.1);
    transition:
        color 0.2s,
        background 0.2s,
        transform 0.2s,
        box-shadow 0.2s;
}

.es-collab-modal__panel--participa .es-collab-modal__head--participa .es-collab-modal__close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    transform: none;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.es-collab-modal__panel--participa .es-collab-modal__field {
    gap: 0.28rem;
    margin-bottom: 0.55rem;
}

/* Camps curts: no estirar a tot l’ample del panell */
.es-collab-modal__panel--participa .es-collab-modal__field:has(.es-cm-tel) .es-cm-tel {
    max-width: 12.25rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
}

.es-collab-modal__panel--participa .es-collab-modal__field:has(#es-fl-imp-dni) #es-fl-imp-dni,
.es-collab-modal__panel--participa .es-collab-modal__field:has(#es-fl-imp-cp) #es-fl-imp-cp {
    max-width: 10.5rem;
}

.es-collab-modal__panel--participa .es-collab-modal__field:has(#es-fl-imp-nom) #es-fl-imp-nom,
.es-collab-modal__panel--participa .es-collab-modal__field:has(#es-fl-imp-cognoms) #es-fl-imp-cognoms {
    max-width: min(100%, 19rem);
}

/* Fluxos no «wide»: nom/email curts; textos llargs (disciplines, taller) a tota l’amplada útil */
.es-collab-modal__panel--participa .es-cm-flux:not(.es-cm-flux--wide) .es-collab-modal__input[type="text"],
.es-collab-modal__panel--participa .es-cm-flux:not(.es-cm-flux--wide) input[type="email"] {
    max-width: 100%;
}

.es-collab-modal__panel--participa .es-cm-flux:not(.es-cm-flux--wide) input[name="disciplines"],
.es-collab-modal__panel--participa .es-cm-flux:not(.es-cm-flux--wide) input[name="taller"],
.es-collab-modal__panel--participa .es-cm-flux:not(.es-cm-flux--wide) textarea {
    max-width: 100%;
}

.es-collab-modal__panel--participa .es-cm-iban {
    max-width: min(100%, 22rem);
    font-variant-numeric: tabular-nums;
}

.es-collab-modal__panel--participa .es-collab-modal__input:not(.es-cm-tel):not(textarea),
.es-collab-modal__panel--participa .es-collab-modal__textarea {
    max-width: 100%;
    transition:
        border-color 0.2s ease,
        box-shadow 0.22s ease;
}

.es-collab-modal__panel--participa .es-collab-modal__input:focus,
.es-collab-modal__panel--participa .es-collab-modal__textarea:focus {
    outline: none;
    border-color: rgba(58, 89, 91, 0.45);
    box-shadow: 0 0 0 3px rgba(58, 89, 91, 0.12);
}

.es-collab-modal__panel--participa .es-collab-modal__textarea {
    min-height: 2.65rem;
}

.es-collab-modal__panel--participa .es-cm-textarea--compact {
    min-height: 2.4rem;
}

.es-collab-modal__panel--participa .es-collab-modal__submit {
    max-width: 100%;
    background: linear-gradient(165deg, #e4572e 0%, #da5026 45%, #c44420 100%);
    box-shadow: 0 4px 14px rgba(218, 80, 38, 0.35);
    transition:
        transform 0.18s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}

.es-collab-modal__panel--participa .es-collab-modal__submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(218, 80, 38, 0.42);
    filter: brightness(1.03);
}

.es-collab-modal__panel--participa .es-cm-perfil-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin: 0.75rem 0 0.85rem;
}

.es-collab-modal__panel--participa .es-cm-perfil-card {
    padding: 0.72rem 0.5rem;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.es-collab-modal__panel--participa .es-cm-perfil-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(47, 47, 47, 0.08);
}

@media (max-height: 760px) {
    .es-collab-modal__panel--participa .es-cm-form-wrap {
        padding: 0.95rem 1rem 1.1rem;
    }

    .es-collab-modal__panel--participa .es-collab-modal__field {
        margin-bottom: 0.42rem;
    }

    .es-cm-subtitle {
        margin-bottom: 0.55rem !important;
        font-size: 0.82rem !important;
    }
}

.es-collab-modal__panel--participa .es-cm-title-step {
    color: #2c3d3f;
    letter-spacing: -0.02em;
}

.es-collab-modal__panel--participa .es-cm-subtitle {
    color: rgba(44, 61, 63, 0.74);
}

.es-collab-modal__panel--participa .es-collab-modal__label {
    color: #33494c;
}

.es-collab-modal__panel--participa #es-cm-step-0 .es-cm-title-step {
    font-size: 1.05rem;
    font-weight: 700;
    color: #2a383a;
}

.es-collab-modal__panel--participa #es-cm-step-0 .es-cm-eyebrow--step {
    opacity: 0.78;
}

/* ── Modal /participa/ — passos i fluxos (classes es-cm-*; no altera overlay/panell base) ── */
.es-cm-title-step {
    font-size: 1.15rem;
    font-weight: 800;
    color: #2f2f2f;
    margin: 0 0 0.4rem;
    line-height: 1.2;
}

.es-cm-subtitle {
    font-size: 0.9rem;
    color: rgba(47, 47, 47, 0.7);
    line-height: 1.55;
    margin: 0 0 1rem;
}

.es-cm-hint {
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(47, 47, 47, 0.52);
    margin: 0 0 0.35rem;
    line-height: 1.35;
}

.es-cm-field-hint {
    font-size: 0.75rem;
    color: rgba(47, 47, 47, 0.55);
    margin-top: 0.25rem;
}

.es-cm-doc-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    flex: 1;
    min-width: 0;
}

.es-cm-doc-muted {
    font-size: 0.78rem;
    color: rgba(47, 47, 47, 0.55);
    text-align: left;
    line-height: 1.4;
}

.es-cm-doc-muted code {
    font-size: 0.72rem;
    background: rgba(47, 47, 47, 0.06);
    padding: 0.1rem 0.25rem;
    border-radius: 4px;
}

/* PAS 0 — Grid de selecció de perfil */
.es-cm-perfil-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.65rem;
    margin: 1.1rem 0;
}

.es-cm-perfil-card {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 0.75rem;
    border: 2px solid #e5ddd1;
    border-radius: 12px;
    text-align: center;
    transition: all 0.2s;
    background: #fff;
}

.es-cm-perfil-card input[type="radio"] {
    display: none;
}

.es-cm-perfil-card:hover,
.es-cm-perfil-card.selected {
    border-color: #3a595b;
    background: #f0f5f5;
}

.es-cm-perfil-icon {
    font-size: 1.5rem;
    margin-bottom: 0.4rem;
}

.es-cm-perfil-icon--lucide {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.45rem;
    height: 2.45rem;
    margin-bottom: 0.45rem;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(58, 89, 91, 0.16), rgba(218, 80, 38, 0.1));
    border: 1px solid rgba(58, 89, 91, 0.24);
    box-shadow: 0 3px 12px rgba(47, 47, 47, 0.07);
}

.es-cm-perfil-icon--lucide svg {
    width: 1.22rem;
    height: 1.22rem;
    color: #2a4547;
    stroke-width: 2.25;
}

.es-cm-perfil-nom {
    font-size: 0.8rem;
    color: #333;
    line-height: 1.3;
}

/* Botó enrere */
.es-cm-back {
    background: none;
    border: none;
    color: #666;
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0;
    margin-bottom: 1rem;
    display: block;
    font-family: inherit;
}

.es-cm-back:hover {
    color: #3a595b;
}

/* Info box */
.es-cm-info-box {
    background: #f0f4f4;
    border-radius: 8px;
    border-left: 3px solid #3a595b;
    padding: 0.45rem 0.75rem;
    font-size: 0.72rem;
    color: #555;
    margin-bottom: 0.75rem;
}

.es-cm-info-box p {
    margin: 0;
    line-height: 1.35;
}

.es-cm-info-box__ico-wrap {
    display: inline-flex;
    vertical-align: middle;
    margin-right: 0.4rem;
}

.es-cm-info-box__ico-wrap svg {
    width: 1.05rem;
    height: 1.05rem;
    color: #3a595b;
}

/* Document preview */
.es-cm-doc-preview {
    border: 1px solid #e5ddd1;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.es-cm-doc-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #333;
    font-weight: 600;
}

.es-cm-doc-header-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 11px;
    background: rgba(58, 89, 91, 0.12);
    color: #3a595b;
    flex-shrink: 0;
}

.es-cm-doc-header-ico svg {
    width: 1.12rem;
    height: 1.12rem;
}

.es-cm-doc-link {
    font-size: 0.875rem;
    color: #da5026;
    text-decoration: none;
    white-space: normal;
    font-weight: 600;
    max-width: 100%;
}

.es-cm-doc-link:hover {
    text-decoration: underline;
}

.es-cm-imp-cond-block {
    background: rgba(58, 89, 91, 0.05);
    border-radius: 10px;
    padding: 0.75rem 0.9rem 0.6rem;
    border: 1px solid rgba(58, 89, 91, 0.14);
}

.es-cm-imp-read-notice {
    font-size: 0.8rem;
    color: #33494c;
    margin: 0 0 0.6rem;
    line-height: 1.4;
}

.es-cm-imp-read-notice .es-cm-doc-link {
    font-size: 0.8rem;
    font-weight: 700;
}

.es-cm-imp-cond-block .es-collab-modal__legal {
    margin-bottom: 0.35rem;
}

#es-cm-flux-impulsor .es-cm-flux-submit {
    display: block;
    width: min(100%, 22rem);
    margin: 0 auto 0;
    text-align: center;
}

#es-cm-flux-impulsor .es-cm-flux-inner {
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 0.45rem;
    column-gap: 0.75rem;
}

#es-cm-flux-impulsor .es-cm-info-box {
    font-size: 0.7rem !important;
    padding: 0.3rem 0.65rem !important;
    margin-bottom: 0.4rem !important;
}

#es-cm-flux-impulsor .es-cm-info-box p {
    font-size: 0.7rem !important;
    margin: 0;
}

/* IBAN: meitat d'ample + hint al costat dret */
.es-cm-iban-row {
    display: flex;
    align-items: flex-end;
    gap: 0.85rem;
}

.es-cm-iban-field {
    flex: 0 0 55%;
    min-width: 0;
}

.es-cm-iban-hint-aside {
    flex: 1 1 auto;
    font-size: 0.7rem;
    color: #7a9a9c;
    line-height: 1.35;
    margin: 0;
    padding-bottom: 0.35rem;
}

/* Grid 2 columnes */
.es-cm-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.es-cm-flux--wide .es-cm-flux-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem 1.35rem;
    align-items: start;
}

#es-cm-flux-impulsor .es-cm-flux-split {
    grid-template-columns: 1fr;
    gap: 0.65rem;
}

#es-cm-flux-impulsor .es-cm-grid-2 {
    grid-template-columns: 1fr;
}

/* Fluxos simples — grid a l'interior (.es-cm-flux-inner), NO al contenidor principal */
.es-cm-flux-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem 1.1rem;
    align-items: start;
}

@media (max-width: 600px) {
    .es-cm-flux-inner {
        grid-template-columns: 1fr;
    }
    .es-cm-flux-inner > * {
        grid-column: 1 !important;
    }
}

.es-cm-vol-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem 1rem;
    margin-bottom: 0.35rem;
}

/* Checkbox group */
.es-cm-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.25rem;
}

.es-cm-checkbox-group .es-collab-modal__check {
    margin: 0;
}

.es-cm-checkbox-group--inline {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem;
}

@media (max-width: 900px) {
    .es-cm-perfil-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 820px) {
    .es-cm-flux--wide .es-cm-flux-split {
        grid-template-columns: 1fr;
    }

    .es-cm-vol-two {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .es-cm-perfil-grid {
        grid-template-columns: 1fr;
    }

    .es-cm-grid-2 {
        grid-template-columns: 1fr;
    }
}


/* ══════════════════════════════════════════════════════════════════
   DASHBOARD COL·LABORADORS — portal intern
   ══════════════════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────────────────── */
.es-db-dashboard {
    --es-db-vidrian-dark:  #1d3334;
    --es-db-vidrian:       #3a595b;
    --es-db-vidrian-light: #7eb5b0;
    --es-db-siena:         #da5026;
    --es-db-ocre:          #8a5443;
    --es-db-alabastro:     #e5ddd1;
    --es-db-ebano:         #2f2f2f;
}

/* Ocultar el botó "Portal" del site-header quan estem al dashboard */
body.es-db-dashboard-page #site-header .es-header-portal-btn,
body.es-db-dashboard-page a[href*="portal-sacra"],
body.es-db-dashboard-page a[href*="dashboard-collaboradors"] {
    display: none !important;
}
/* Excepció: CTAs d'alertes mai s'han d'ocultar */
body.es-db-dashboard-page .es-db-alerta__cta[href*="portal-sacra"],
body.es-db-dashboard-page .es-db-alerta__cta[href*="dashboard-collaboradors"],
body.es-db-dashboard-page .es-db-bloquejat a[href*="portal-sacra"],
body.es-db-dashboard-page .es-db-bloquejat a[href*="dashboard-collaboradors"],
body.es-db-dashboard-page .es-db-dietes-back,
body.es-db-dashboard-page .es-dietes-btn-back,
body.es-db-dashboard-page .es-dietes-success-btn,
body.es-db-dietes-page .es-db-dietes-back,
body.es-db-dietes-page .es-dietes-btn-back,
body.es-db-dietes-page .es-dietes-success-btn {
    display: inline-flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Fix especific: font del title quan és dins d'una pàgina de tipus dashboard */
.es-db-dashboard-page .es-db-dashboard .es-db-hero__title,
.es-db-dashboard .es-db-quote__text {
    font-family: "Cormorant Garamond", Georgia, serif;
}

/* Espai per al header fix + background net i lluminós */
.es-db-dashboard {
    padding-top: 138px;
    background: #f0ece6;
}
@media (max-width: 768px) {
    .es-db-dashboard {
        padding-top: 90px;
    }
}

/* ── Hero fons complet VIDRIÁN — sense cantonades ──────────────── */
.es-db-hero {
    position: relative;
    z-index: 0;
    overflow: hidden;
    background: #1d3334;
    border-radius: 0;
    border-top: 4px solid #da5026;
}

.es-db-hero__split {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    max-width: 1100px;
    margin: 0 auto;
    min-height: 220px;
}

.es-db-hero__brand {
    flex: 0 0 38%;
    max-width: 38%;
    background: rgba(0, 0, 0, 0.22);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 2.5vw, 1.75rem);
}

.es-db-hero__brand-kicker {
    margin: 0 0 0.35rem;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #b8ddd8 !important;
}

.es-db-hero__brand-title {
    margin: 0;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(1.35rem, 2.8vw, 2rem);
    font-weight: 600;
    line-height: 1.15;
    color: #ffffff !important;
    letter-spacing: 0.02em;
}

.es-db-hero__panel {
    flex: 1 1 62%;
    min-width: 0;
    position: relative;
    background: transparent;
    padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2.25rem);
    padding-top: clamp(1rem, 2.5vw, 1.5rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Badge connexió: cantonada superior dreta */
.es-db-hero__badge-corner {
    position: absolute;
    top: 1rem;
    right: clamp(1.25rem, 3vw, 2.25rem);
}

.es-db-hero__banner {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 1rem;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    background: rgba(253, 224, 71, 0.15);
    border: 1px solid rgba(253, 224, 71, 0.4);
    font-size: 0.8125rem;
    font-weight: 600;
    color: #fde68a;
}

.es-db-hero__banner a {
    color: #fca5a5;
    text-decoration: underline;
}

.es-db-hero__eyebrow {
    margin: 3rem 0 0.45rem;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: clamp(0.68rem, 1vw, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #b8ddd8 !important;
}

.es-db-hero__title {
    margin: 0 0 0.25rem;
    font-size: clamp(1.85rem, 4vw, 2.65rem);
    font-weight: 600;
    line-height: 1.1;
    color: #ffffff !important;
}

.es-db-hero__fullname {
    margin: 0 0 0.65rem;
    font-size: 0.95rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.88) !important;
}

.es-db-hero__subtitle {
    margin: 0 0 1rem;
    max-width: 36rem;
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82) !important;
}

.es-db-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.65rem;
    margin-bottom: 1.15rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85) !important;
}

.es-db-hero__date {
    font-weight: 600;
    color: #b8ddd8 !important;
}

.es-db-hero__dot {
    opacity: 0.5;
    color: rgba(255, 255, 255, 0.7) !important;
}

.es-db-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.es-db-hero__panel .es-db-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.32);
    color: #ffffff !important;
}

/* Botó tancar sessió: part inferior dreta */
.es-db-hero__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
    padding-top: 0.75rem;
}

.es-db-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    flex-shrink: 0;
}

.es-db-hero__badge--ok {
    background: rgba(74, 222, 128, 0.18);
    border: 1px solid rgba(74, 222, 128, 0.45);
    color: #bbf7d0;
}

.es-db-hero__pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.7);
}

.es-db-hero__badge--warn {
    background: rgba(253, 224, 71, 0.18);
    border: 1px solid rgba(253, 224, 71, 0.4);
    color: #fde68a;
}

.es-db-hero__dot-warn {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fbbf24;
}

.es-db-logout-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
    margin-left: auto;
    flex-shrink: 0;
}

.es-db-logout-btn:hover {
    border-color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.es-db-logout-btn__icon {
    width: 1rem;
    height: 1rem;
    color: inherit;
}

.es-db-portal-label {
    background: #162728;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 8px 24px;
    font-size: 12px;
    color: rgba(168, 216, 206, 0.75);
    letter-spacing: 0.05em;
    font-weight: 500;
}

@media (max-width: 720px) {
    .es-db-hero__split {
        flex-direction: column;
    }

    .es-db-hero__brand {
        flex: none;
        max-width: none;
        width: 100%;
        min-height: auto;
        padding: 1.1rem 1.25rem;
    }

    .es-db-hero__brand-title {
        font-size: 1.5rem;
    }

    .es-db-hero__panel {
        flex: none;
        width: 100%;
    }

    .es-db-hero__actions {
        flex-wrap: wrap;
    }

    .es-db-logout-btn {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }
}

/* ── Main ──────────────────────────────────────────────────────── */
.es-db-main {
    position: relative;
    z-index: 0;
    background: #f0ece6;
    min-height: 60vh;
    padding: clamp(1rem, 2vw, 1.5rem) 0 clamp(3rem, 6vw, 5rem);
}

.es-db-main__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
}

.es-db-section-label {
    margin: 0 0 1.25rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(47, 47, 47, 0.45);
}

.es-db-empty-state {
    text-align: center;
    max-width: 32rem;
    margin: 0 auto 2.5rem;
    padding: 2rem 1.5rem;
    background: #fff;
    border-radius: 20px;
    border: 1px solid rgba(58, 89, 91, 0.12);
    box-shadow: 0 4px 28px rgba(0, 0, 0, 0.06);
}

.es-db-empty-state__icon {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(58, 89, 91, 0.12), rgba(58, 89, 91, 0.05));
    display: flex;
    align-items: center;
    justify-content: center;
}

.es-db-empty-state__icon svg {
    width: 2rem;
    height: 2rem;
    color: var(--es-db-vidrian);
}

.es-db-empty-state__title {
    margin: 0 0 0.65rem;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--es-db-ebano);
}

.es-db-empty-state__text,
.es-db-empty-state__hint {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.65;
    color: rgba(47, 47, 47, 0.72);
}

.es-db-empty-state__hint {
    margin-top: 0.5rem;
    font-size: 0.95rem;
    color: rgba(47, 47, 47, 0.5);
}

/* Grid targetes */
.es-db-grid {
    --es-db-grid-gap: 1.05rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: var(--es-db-grid-gap);
}

.es-db-grid > .es-db-card {
    box-sizing: border-box;
    flex: 0 1 calc((100% - (2 * var(--es-db-grid-gap))) / 3);
    max-width: calc((100% - (2 * var(--es-db-grid-gap))) / 3);
    min-width: 0;
}

@media (max-width: 900px) {
    .es-db-grid > .es-db-card {
        flex: 0 1 calc((100% - var(--es-db-grid-gap)) / 2);
        max-width: calc((100% - var(--es-db-grid-gap)) / 2);
    }
}

@media (max-width: 560px) {
    .es-db-grid > .es-db-card {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

.es-db-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1rem 1rem 0.9rem;
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(47, 47, 47, 0.08);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.045);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.es-db-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.09);
}

.es-db-card--vidrian   { border-top: 3px solid var(--es-db-vidrian); }
.es-db-card--siena     { border-top: 3px solid var(--es-db-siena); }
.es-db-card--ocre      { border-top: 3px solid var(--es-db-ocre); }
.es-db-card--documents { border-top: 3px solid var(--es-db-vidrian); }

.es-db-card__icon {
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.65rem;
    font-size: 1.35rem;
    line-height: 1;
    background: var(--es-db-alabastro);
}

.es-db-card__title {
    margin: 0 0 0.4rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--es-db-ebano);
}

.es-db-card__desc {
    margin: 0 0 0.75rem;
    flex: 1 1 auto;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.55;
    color: #4a4a4a;
}

.es-db-card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.65rem;
    margin-top: auto;
}

.es-db-card__cta {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--es-db-siena);
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.es-db-card__cta:hover { text-decoration: underline; }

.es-db-card__cta--soon {
    cursor: default;
    color: rgba(47, 47, 47, 0.45);
    text-decoration: none;
}

.es-db-badge {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #666;
    background: rgba(47, 47, 47, 0.08);
}

/* ── Formulari dietes ──────────────────────────────────────────── */
.es-dietes-wrap { max-width: 100%; overflow-x: auto; }
.es-dietes-header-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1D3334;
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 10px;
    margin-bottom: 1rem;
}
.es-dietes-header-box h3 { margin: 0; font-size: 1rem; }
.es-dietes-dades-grid,
.es-dietes-perceptor-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.es-dietes-imports-info {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    background: #F7F3EE;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.8rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.es-dietes-taula-wrap { overflow-x: auto; margin-bottom: 0.75rem; }
.es-dietes-taula {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    min-width: 900px;
}
.es-dietes-taula th {
    background: #1D3334;
    color: white;
    padding: 6px 4px;
    text-align: center;
    font-size: 0.75rem;
    line-height: 1.2;
}
.es-dietes-taula td {
    padding: 4px 6px;
    border: 1px solid #E5DDD1;
    vertical-align: middle;
}
.es-dietes-taula tbody tr:nth-child(even) td { background: #F9F9F9; }
.es-dietes-taula input[type="text"],
.es-dietes-taula input[type="date"],
.es-dietes-taula input[type="number"] {
    width: 100%;
    border: 1px solid #E5DDD1;
    border-radius: 4px;
    padding: 3px 5px;
    font-size: 0.75rem;
}
.es-dietes-taula .es-d-km            { width: 70px; }
.es-dietes-taula .es-d-peatges       { width: 52px; }
.es-dietes-taula .es-d-pernocta-dies { width: 36px; }

/* Amplades de columna de la taula */
.es-dietes-taula .col-data           { width: 95px;  min-width: 95px; }
.es-dietes-taula .col-km             { width: 65px;  min-width: 65px; }
.es-dietes-taula .col-import-km      { width: 72px;  min-width: 72px; }
.es-dietes-taula .col-peatges        { width: 60px;  min-width: 60px; }
.es-dietes-taula .col-manuten        { width: 65px;  min-width: 65px; }
.es-dietes-taula .col-pernocta-dies  { width: 46px;  min-width: 46px; }
.es-dietes-taula .col-pernocta-import{ width: 72px;  min-width: 72px; }
.es-dietes-taula .col-total          { width: 88px;  min-width: 88px; font-weight: 700; }
.es-dietes-taula .col-accions        { width: 32px;  min-width: 32px; }

/* Alineació dreta: totes les cel·les d'import */
.es-dietes-taula .num,
.es-dietes-taula [id^="es-km-import-"],
.es-dietes-taula [id^="es-pernocta-import-"],
.es-dietes-taula [id^="es-total-fila-"],
.es-dietes-taula #es-total-km-import,
.es-dietes-taula #es-total-peatges,
.es-dietes-taula #es-total-manuten,
.es-dietes-taula #es-total-pernocta,
.es-dietes-taula #es-total-general  { text-align: right; }

/* Alineació dreta per als inputs d'import (peatges) */
.es-dietes-taula .es-d-peatges,
.es-dietes-taula .es-d-km           { text-align: right; }
.es-d-delete {
    background: none;
    border: 1px solid #DA5026;
    color: #DA5026;
    border-radius: 4px;
    cursor: pointer;
    padding: 2px 6px;
    font-size: 0.75rem;
}
.es-dietes-totals td {
    background: #E5DDD1;
    font-weight: bold;
}
.es-dietes-btn-add {
    background: white;
    border: 1.5px dashed #3A595B;
    color: #3A595B;
    border-radius: 8px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}
.es-dietes-pagament {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
}
.es-dietes-pagament-options { display: flex; gap: 1.5rem; }
.es-dietes-notes {
    font-size: 0.75rem;
    color: #666;
    border: 1px solid #E5DDD1;
    padding: 0.75rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}
.es-dietes-programa {
    background: #F7F3EE;
    padding: 0.5rem;
    border-left: 3px solid #DA5026;
    font-size: 0.75rem;
    margin-top: 0.5rem;
}
.es-dietes-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(58, 89, 91, 0.12);
}
.es-dietes-btn-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.65rem 1.25rem;
    border-radius: 100px;
    border: 1.5px solid rgba(58, 89, 91, 0.3);
    background: #fff;
    color: #3a595b !important;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.es-dietes-btn-back:hover {
    background: #f0f5f5;
    border-color: #3a595b;
    color: #1e2d2e !important;
}
.es-dietes-actions .es-dietes-hint {
    flex: 1 1 100%;
    margin: 0;
}
.es-dietes-error {
    background: #FFF0ED;
    border: 1px solid #DA5026;
    color: #DA5026;
    padding: 0.75rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}
.es-dietes-hint { font-size: 0.75rem; color: #999; margin-top: 0.5rem; }
.es-dietes-success {
    text-align: center;
    padding: 2rem;
    background: #F0F5F5;
    border-radius: 12px;
}
.es-dietes-success-icon {
    font-size: 2.5rem;
    color: #3A595B;
    display: block;
    margin-bottom: 1rem;
}
.es-dietes-success-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1.25rem;
    padding: 0.6rem 1.4rem;
    border-radius: 100px;
    background: #3a595b;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 14px rgba(58, 89, 91, 0.25);
}
.es-dietes-success-btn:hover {
    background: #2d4547;
    color: #ffffff;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(58, 89, 91, 0.35);
}

/* Botó generar dietes — forçat visible */
#es-dietes-submit {
    background: #3A595B !important;
    color: #ffffff !important;
    border: none !important;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
}
#es-dietes-submit:hover {
    background: #2d4547 !important;
}
#es-dietes-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 600px) {
    .es-dietes-dades-grid,
    .es-dietes-perceptor-grid {
        grid-template-columns: 1fr;
    }

    .es-dietes-header-box {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ══════════════════════════════════════════════════════════════════
   DASHBOARD v4 — PILL NAV + BENTO GRID — LIGHT & CLEAN
   ══════════════════════════════════════════════════════════════════ */

/* ── LIGHT EMPTY STATE ─────────────────────────────────────────── */
.es-db-dashboard .es-db-empty-state {
    background: #ffffff;
    border: 1px solid rgba(58, 89, 91, 0.1);
    border-radius: 20px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
}
.es-db-dashboard .es-db-empty-state__title { color: #1e2d2e; }
.es-db-dashboard .es-db-empty-state__text,
.es-db-dashboard .es-db-empty-state__hint  { color: #6b7b7c; }
.es-db-dashboard .es-db-empty-state__icon  {
    background: rgba(58, 89, 91, 0.08);
}
.es-db-dashboard .es-db-empty-state__icon svg { color: #3a595b; }

/* ── PILL NAVIGATION ───────────────────────────────────────────── */
.es-db-nav {
    position: sticky;
    top: 138px;
    z-index: 50;
    padding: 1.5rem 0 0.75rem;
    background: linear-gradient(180deg, #f0ece6 0%, rgba(240, 236, 230, 0.97) 80%, transparent 100%);
    transition: background 0.3s ease;
}
.es-db-nav--scrolled {
    background: rgba(240, 236, 230, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(58, 89, 91, 0.08);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.05);
}

.es-db-nav__track {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
    display: flex;
    justify-content: center;
}

.es-db-pills {
    display: inline-flex;
    gap: 0.25rem;
    background: #ffffff;
    border: 1px solid rgba(58, 89, 91, 0.12);
    border-radius: 100px;
    padding: 0.3rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.05);
}

.es-db-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1.35rem;
    border-radius: 100px;
    border: none;
    background: transparent;
    color: #6b7b7c;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    line-height: 1;
}
.es-db-pill:hover {
    color: #1e2d2e;
    background: rgba(58, 89, 91, 0.06);
}
.es-db-pill.is-active {
    background: #3a595b;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(58, 89, 91, 0.3);
}

/* ── TAB PANELS ────────────────────────────────────────────────── */
.es-db-tab {
    display: none;
}
.es-db-tab.is-active {
    display: block;
    animation: esDashTabIn 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes esDashTabIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── BENTO GRID ────────────────────────────────────────────────── */
.es-db-bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.1rem;
    padding-top: 1rem;
}

.es-db-bi             { grid-column: span 12; }
.es-db-bi--full       { grid-column: span 12; }
.es-db-bi--wide       { grid-column: span 8; }
.es-db-bi--half       { grid-column: span 6; }
.es-db-bi--third      { grid-column: span 4; }
.es-db-bi--quarter    { grid-column: span 3; }

@media (max-width: 1024px) {
    .es-db-bi--wide    { grid-column: span 12; }
    .es-db-bi--half    { grid-column: span 6; }
    .es-db-bi--third   { grid-column: span 6; }
}

@media (max-width: 700px) {
    .es-db-bento        { gap: 0.85rem; }
    .es-db-bi--wide,
    .es-db-bi--half,
    .es-db-bi--third,
    .es-db-bi--quarter  { grid-column: span 12; }
    .es-db-nav          { top: 90px; padding-top: 1rem; }
}

/* ── BENTO ITEM: BASE ──────────────────────────────────────────── */
.es-db-bi {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 1.75rem;
    background: #ffffff;
    border: 1px solid rgba(58, 89, 91, 0.1);
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.25s ease,
                border-color 0.25s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05), 0 2px 12px rgba(0, 0, 0, 0.04);
}
.es-db-bi:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06);
    border-color: rgba(58, 89, 91, 0.18);
}

/* Línia d'accent superior (3px, sòlida i neta) */
.es-db-bi::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: transparent;
    border-radius: 20px 20px 0 0;
    transition: opacity 0.25s ease;
}

/* ── COLORS D'ACCENT ───────────────────────────────────────────── */
.es-db-bi--green::before  { background: #7eb5b0; }
.es-db-bi--siena::before  { background: #da5026; }
.es-db-bi--ocre::before   { background: #c4924a; }
.es-db-bi--gold::before   { background: #f59e0b; }

/* ── BENTO ITEM: FEATURED (gran, tint de color suau) ───────────── */
.es-db-bi--featured {
    padding: clamp(1.75rem, 3vw, 2.5rem);
}
.es-db-bi--featured.es-db-bi--green {
    background: linear-gradient(145deg, rgba(126, 181, 176, 0.07) 0%, #ffffff 60%);
}
.es-db-bi--featured.es-db-bi--siena {
    background: linear-gradient(145deg, rgba(218, 80, 38, 0.06) 0%, #ffffff 60%);
}
.es-db-bi--featured.es-db-bi--ocre {
    background: linear-gradient(145deg, rgba(196, 146, 74, 0.07) 0%, #ffffff 60%);
}
.es-db-bi--featured.es-db-bi--gold {
    background: linear-gradient(145deg, rgba(245, 158, 11, 0.07) 0%, #ffffff 60%);
}

/* Ornament de fons per a items featured */
.es-db-bi--featured::after {
    content: '';
    position: absolute;
    bottom: -30px; right: -30px;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(126, 181, 176, 0.1) 0%, transparent 70%);
    pointer-events: none;
}
.es-db-bi--featured.es-db-bi--siena::after {
    background: radial-gradient(circle, rgba(218, 80, 38, 0.08) 0%, transparent 70%);
}
.es-db-bi--featured.es-db-bi--ocre::after {
    background: radial-gradient(circle, rgba(196, 146, 74, 0.1) 0%, transparent 70%);
}
.es-db-bi--featured.es-db-bi--gold::after {
    background: radial-gradient(circle, rgba(245, 158, 11, 0.1) 0%, transparent 70%);
}

/* ── ANATOMIA DELS ITEMS ───────────────────────────────────────── */
.es-db-bi__icon {
    font-size: 1.75rem;
    line-height: 1;
    display: block;
    margin-bottom: 0.1rem;
}
.es-db-bi__label {
    display: block;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #3a595b;
    opacity: 0.6;
    margin: 0;
}
.es-db-bi--siena .es-db-bi__label { color: #da5026; }
.es-db-bi--ocre  .es-db-bi__label { color: #b87b3a; }
.es-db-bi--gold  .es-db-bi__label { color: #b45309; }

.es-db-bi__title {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(1.1rem, 1.6vw, 1.45rem);
    font-weight: 600;
    line-height: 1.2;
    color: #1e2d2e;
    margin: 0;
    letter-spacing: 0.01em;
}
.es-db-bi--wide .es-db-bi__title,
.es-db-bi--full .es-db-bi__title {
    font-size: clamp(1.45rem, 2.2vw, 2rem);
}

.es-db-bi__desc {
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.9rem;
    line-height: 1.65;
    color: #6b7b7c;
    margin: 0;
    flex: 1;
}
.es-db-bi--featured .es-db-bi__desc {
    max-width: 42rem;
}

/* ── CTA (botons i links) ──────────────────────────────────────── */
.es-db-bi__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 1.3rem;
    border-radius: 100px;
    border: 1.5px solid rgba(58, 89, 91, 0.25);
    background: transparent;
    color: #3a595b;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.22s ease;
    width: fit-content;
    text-decoration: none;
    margin-top: auto;
    align-self: flex-start;
}
.es-db-bi__cta:hover {
    background: #3a595b;
    border-color: #3a595b;
    color: #ffffff;
    transform: translateX(3px);
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(58, 89, 91, 0.25);
}

.es-db-bi__cta--siena {
    border-color: rgba(218, 80, 38, 0.3);
    color: #da5026;
}
.es-db-bi__cta--siena:hover {
    background: #da5026;
    border-color: #da5026;
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(218, 80, 38, 0.25);
}

.es-db-bi__cta--gold {
    border-color: rgba(180, 83, 9, 0.3);
    color: #b45309;
}
.es-db-bi__cta--gold:hover {
    background: #b45309;
    border-color: #b45309;
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(180, 83, 9, 0.25);
}

/* ── BADGE "PRÒXIMAMENT" ───────────────────────────────────────── */
.es-db-bi__badge-soon {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.9rem;
    border-radius: 100px;
    background: rgba(58, 89, 91, 0.06);
    border: 1px solid rgba(58, 89, 91, 0.12);
    color: #6b7b7c;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    width: fit-content;
    margin-top: auto;
    align-self: flex-start;
}

/* ── CITA INSTITUCIONAL (light) ────────────────────────────────── */
.es-db-quote {
    margin: 3.5rem auto 0;
    max-width: 600px;
    text-align: center;
    border: none;
    padding: 0 1rem;
}
.es-db-quote__text {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(1rem, 2vw, 1.3rem);
    font-style: italic;
    color: rgba(58, 89, 91, 0.35);
    margin: 0;
}

/* ── RESPONSIVE MÒBIL: pills scroll horitzontal ────────────────── */
@media (max-width: 560px) {
    .es-db-nav__track  { justify-content: flex-start; overflow-x: auto; }
    .es-db-pills       { flex-wrap: nowrap; }
    .es-db-pill        { padding: 0.45rem 1.1rem; font-size: 0.8125rem; }
}

/* ── SKIP LINK (accessible, visualment ocult) ──────────────────── */
.es-skip-link,
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.es-skip-link:focus {
    position: fixed !important;
    top: 0.5rem !important;
    left: 0.5rem !important;
    z-index: 99999 !important;
    width: auto !important;
    height: auto !important;
    clip: auto !important;
    white-space: normal !important;
    padding: 0.5rem 1.25rem !important;
    margin: 0 !important;
    background: #3a595b !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25) !important;
}

/* ── PÀGINA STANDALONE DIETES ──────────────────────────────────── */
.es-db-dietes-header {
    background: #ffffff;
    border-bottom: 1px solid rgba(58, 89, 91, 0.1);
    padding: clamp(2rem, 4vw, 3rem) 0;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
}
.es-db-dietes-header__inner {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.es-db-dietes-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.1rem 0.5rem 0.85rem;
    border-radius: 100px;
    border: 1.5px solid rgba(58, 89, 91, 0.25);
    background: #ffffff;
    color: #3a595b;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    width: fit-content;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.es-db-dietes-back svg {
    width: 1rem; height: 1rem;
}
.es-db-dietes-back:hover {
    background: #3a595b;
    border-color: #3a595b;
    color: #ffffff;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(58, 89, 91, 0.25);
    transform: translateX(-2px);
}
.es-db-dietes-header__label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #b45309;
    opacity: 0.7;
    margin-bottom: 0.5rem;
}
.es-db-dietes-header__title {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 600;
    color: #1e2d2e;
    margin: 0 0 0.5rem;
    line-height: 1.15;
}
.es-db-dietes-header__sub {
    font-size: 0.95rem;
    color: #6b7b7c;
    margin: 0;
    line-height: 1.6;
}

/* Botó Enrere fix (sempre visible; el dashboard amagava enllaços a dashboard-collaboradors) */
.es-dietes-back-fixed {
    position: fixed;
    left: clamp(0.75rem, 3vw, 1.5rem);
    bottom: clamp(0.75rem, 3vw, 1.5rem);
    z-index: 99990;
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.35rem 0.75rem 1.1rem;
    border-radius: 100px;
    background: #3a595b !important;
    color: #ffffff !important;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: 0 8px 28px rgba(30, 45, 46, 0.35);
    border: 2px solid rgba(255, 255, 255, 0.25);
    transition: transform 0.2s, box-shadow 0.2s;
}
.es-dietes-back-fixed svg {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
}
.es-dietes-back-fixed:hover {
    color: #ffffff !important;
    text-decoration: none !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(30, 45, 46, 0.42);
}
body.es-db-dietes-page .es-dietes-back-fixed,
body.es-db-dashboard-page.es-db-dietes-page .es-dietes-back-fixed {
    display: inline-flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Label discret dins el formulari (substitueix el h2 gran) */
.es-portal-section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #6b7b7c;
    margin: 0 0 1.25rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid rgba(58, 89, 91, 0.1);
    width: 100%;
}

/* ── ALERTES ──────────────────────────────────────────────────────────────── */
.es-db-alertes {
    background: #FFF8F0;
    border-bottom: 2px solid #DA5026;
    padding: 1rem 1.5rem;
}
.es-db-alertes__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.es-db-alertes__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: #2F2F2F;
}
.es-db-alerta {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.875rem 1rem;
    border-radius: 10px;
    background: white;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.es-db-alerta--bloquejant {
    border-left: 4px solid #DA5026;
}
.es-db-alerta--avis {
    border-left: 4px solid #E8A838;
}
.es-db-alerta--info {
    border-left: 4px solid #3A595B;
}
.es-db-alerta__icon {
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 2px;
}
.es-db-alerta__body {
    flex: 1;
}
.es-db-alerta__titol {
    display: block;
    font-size: 0.875rem;
    color: #2F2F2F;
    margin-bottom: 2px;
}
.es-db-alerta__text {
    font-size: 0.8rem;
    color: #666;
    margin: 0;
}
.es-db-alerta__cta {
    flex-shrink: 0;
    display: inline-block;
    padding: 10px 24px;
    background: #DA5026;
    color: white !important;
    border-radius: 25px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
    align-self: center;
    cursor: pointer;
    transition: background 0.2s;
    box-shadow: 0 3px 10px rgba(218, 80, 38, 0.3);
}
.es-db-alerta__cta:hover {
    background: #C0431E;
    color: white !important;
}
.es-db-alerta--avis .es-db-alerta__cta {
    background: #E8A838;
    box-shadow: 0 3px 10px rgba(232, 168, 56, 0.3);
}
.es-db-alerta--avis .es-db-alerta__cta:hover {
    background: #C08820;
}
.es-db-alerta--info .es-db-alerta__cta {
    background: #3A595B;
    box-shadow: 0 3px 10px rgba(58, 89, 91, 0.3);
}
.es-db-alerta--info .es-db-alerta__cta:hover {
    background: #2a4042;
}
.es-db-alerta__cta--prominent {
    padding: 10px 24px;
    font-size: 0.9rem;
    font-weight: 600;
}

/* ── BLOQUEIG SECCIONS ────────────────────────────────────────────────────── */
.es-db-bloquejat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
    background: #F7F3EE;
    border-radius: 12px;
    min-height: 200px;
}
.es-db-bloquejat__icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    display: block;
}
.es-db-bloquejat__text {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

/* ── DOCS LIST ────────────────────────────────────────────────────────────── */
.es-db-docs-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}
.es-db-doc-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #f0f5f4;
    border: 1.5px solid #b5d0cc;
    border-radius: 8px;
    color: #1e2d2e !important;
    text-decoration: none !important;
    font-size: 0.875rem;
    font-weight: 600;
    transition: background 0.2s, border-color 0.2s;
}
.es-db-doc-link:hover {
    background: #ddecea;
    border-color: #7eb5b0;
    color: #1e2d2e !important;
}
.es-db-doc-icon {
    flex-shrink: 0;
}
.es-db-doc-arrow {
    margin-left: auto;
}

@media (max-width: 640px) {
    .es-db-alerta {
        flex-direction: column;
        gap: 0.5rem;
    }
    .es-db-alerta__cta {
        align-self: flex-start;
    }
}

/* ── BANNER RENOVACIÓ ONBOARDING ──────────────────────────────────────────── */
.es-ob-renovacio-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: #FFF8F0;
    border: 1px solid #E8A838;
    border-left: 4px solid #E8A838;
    border-radius: 10px;
    padding: 0.875rem 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
}
.es-ob-renovacio-banner__icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}
.es-ob-renovacio-banner strong {
    display: block;
    color: #2F2F2F;
    margin-bottom: 3px;
}
.es-ob-renovacio-banner p {
    margin: 0;
    color: #666;
    font-size: 0.8rem;
}

/* ── CAMPS INCOMPLETS ONBOARDING ──────────────────────────────────────────── */
.es-ob-field--incomplet input,
.es-ob-field--incomplet select,
.es-ob-field--incomplet textarea {
    border-color: #E8A838 !important;
    background: #FFFBF0 !important;
}
.es-ob-field-incomplet-badge {
    font-size: 0.7rem;
    color: #E8A838;
    font-weight: 500;
    margin-left: 0.5rem;
}

/* ── TAB DOCUMENTS — NOVA SECCIÓ ──────────────────────────────────────────── */
.es-db-docs-section {
    max-width: 800px;
    margin: 0 auto;
    padding: 1.5rem 0;
}
.es-db-docs-intro {
    margin-bottom: 1.5rem;
}
.es-db-docs-intro h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    color: #2F2F2F;
    margin: 0 0 0.5rem;
}
.es-db-docs-intro p {
    color: #666;
    font-size: 0.875rem;
    margin: 0;
}
.es-db-docs-list-full {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* Card individual de document */
.es-db-doc-card {
    border: 1px solid #E5DDD1;
    border-radius: 12px;
    overflow: hidden;
    background: white;
    transition: box-shadow 0.2s;
}
.es-db-doc-card:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}
.es-db-doc-card--acceptat {
    border-color: #3A595B;
    background: #F7FAF7;
}
.es-db-doc-card--pendent {
    border-color: #E8A838;
}
.es-db-doc-card__header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
}
.es-db-doc-card__icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}
.es-db-doc-card__info {
    flex: 1;
    min-width: 0;
}
.es-db-doc-card__titol {
    display: block;
    font-size: 0.9rem;
    color: #2F2F2F;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.es-db-doc-card__estat {
    font-size: 0.75rem;
}
.es-db-doc-card__estat--ok     { color: #3A595B; }
.es-db-doc-card__estat--pendent { color: #c07a00; }
.es-db-doc-card__btn-llegir {
    flex-shrink: 0;
    padding: 6px 14px;
    border: 1.5px solid #3A595B;
    border-radius: 20px;
    color: #3A595B !important;
    text-decoration: none !important;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.es-db-doc-card__btn-llegir:hover {
    background: #3A595B;
    color: white !important;
}

/* Zona d'acceptació */
.es-db-doc-card__acceptacio {
    border-top: 1px solid #E5DDD1;
    padding: 1rem 1.25rem;
    background: #FAFAFA;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.es-db-doc-card__checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: #333;
    cursor: pointer;
    line-height: 1.5;
}
.es-db-doc-card__checkbox-label input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: #3A595B;
}
.es-db-doc-card__checkbox-label input[type="checkbox"]:disabled ~ span {
    opacity: 0.5;
}
.es-db-doc-card__hint {
    font-size: 0.75rem;
    color: #999;
    margin: 0;
}
.es-db-doc-card__btn-acceptar {
    align-self: flex-start;
    padding: 8px 18px;
    background: #3A595B;
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s;
}
.es-db-doc-card__btn-acceptar:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.es-db-doc-card__btn-acceptar:not(:disabled):hover {
    opacity: 0.82;
}
.es-db-doc-card__error {
    font-size: 0.8rem;
    color: #DA5026;
    padding: 2px 0;
}

/* Notes legals i estat buit */
.es-db-docs-legal-note {
    font-size: 0.75rem;
    color: #aaa;
    border-top: 1px solid #E5DDD1;
    padding-top: 1rem;
    margin-top: 0.5rem;
    line-height: 1.5;
}
.es-db-docs-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: #999;
    font-size: 0.875rem;
    background: #fafaf8;
    border-radius: 12px;
    border: 1px dashed #E5DDD1;
}

@media (max-width: 640px) {
    .es-db-doc-card__header {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    .es-db-doc-card__btn-llegir {
        order: 3;
        width: 100%;
        text-align: center;
    }
    .es-db-docs-section {
        padding: 1rem 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TAB "EL MEU PERFIL" — Dashboard col·laboradors
   ═══════════════════════════════════════════════════════════════════════════ */
.es-db-perfil-wrap {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 0 3rem;
}

.es-pf-intro {
    margin-bottom: 2rem;
}
.es-pf-intro h2 {
    font-family: var(--es-font-serif, 'Cormorant Garamond', serif);
    font-size: 1.75rem;
    font-weight: 700;
    color: #1D3334;
    margin: 0 0 0.35rem;
}
.es-pf-intro p {
    color: #6b8383;
    font-size: 0.9rem;
    margin: 0;
}

/* ── Secció (card) ─────────────────────────────────────────────────────────── */
.es-pf-seccio {
    background: #fff;
    border: 1px solid #e0eaea;
    border-radius: 16px;
    padding: 1.75rem 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 12px rgba(29,51,52,0.05);
}

.es-pf-seccio__cap {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #edf3f3;
}
.es-pf-seccio__icon {
    font-size: 1.5rem;
    line-height: 1;
    margin-top: 2px;
}
.es-pf-seccio__titol {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1D3334;
    margin: 0 0 0.2rem;
}
.es-pf-seccio__sub {
    font-size: 0.82rem;
    color: #8aabab;
    margin: 0;
}

/* ── Formulari fields ──────────────────────────────────────────────────────── */
.es-pf-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.es-pf-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.es-pf-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #3A595B;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.es-pf-hint-inline {
    font-size: 0.75rem;
    font-weight: 400;
    color: #9aadad;
    text-transform: none;
    margin-left: 0.3rem;
}
.es-pf-hint {
    font-size: 0.75rem;
    color: #9aadad;
}
.es-pf-input,
.es-pf-select,
.es-pf-textarea {
    width: 100%;
    padding: 0.55rem 0.85rem;
    border: 1.5px solid #d0dfdf;
    border-radius: 8px;
    font-size: 0.88rem;
    color: #1D3334;
    background: #f8fbfb;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
    font-family: inherit;
}
.es-pf-input:focus,
.es-pf-select:focus,
.es-pf-textarea:focus {
    outline: none;
    border-color: #3A595B;
    box-shadow: 0 0 0 3px rgba(58,89,91,0.1);
    background: #fff;
}
.es-pf-input--readonly {
    background: #eef4f4;
    color: #7a9a9a;
    cursor: default;
}
.es-pf-textarea {
    resize: vertical;
    min-height: 80px;
}
.es-pf-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%233A595B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
}

/* ── Grid layouts ──────────────────────────────────────────────────────────── */
.es-pf-grid {
    display: grid;
    gap: 1rem;
}
.es-pf-grid--2  { grid-template-columns: 1fr 1fr; }
.es-pf-grid--3  { grid-template-columns: 1fr 1fr 1fr; }
.es-pf-grid--4c { grid-template-columns: 2fr 1fr 1fr; }
.es-pf-grid--foto {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 1.25rem;
    align-items: start;
}
.es-pf-field--span2 { grid-column: span 2; }

/* ── Foto ──────────────────────────────────────────────────────────────────── */
.es-pf-foto-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100px;
    flex-shrink: 0;
}
.es-pf-foto-preview {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: #e8e4de;
    border: 2px solid #c8c0b4;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.es-pf-foto-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}
.es-pf-foto-svg {
    width: 88px;
    height: 88px;
    display: block;
}
.es-pf-foto-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: #3A595B;
    text-decoration: underline;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
}
.es-pf-foto-btn:hover { color: #1D3334; }
.es-pf-input-file--hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.es-pf-foto-dades {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    justify-content: flex-start;
    flex: 1;
    min-width: 0;
}

/* ── Checkboxes ────────────────────────────────────────────────────────────── */
.es-pf-checks-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 0;
}
.es-pf-check {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: #2d4a4b;
}
.es-pf-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #3A595B;
    cursor: pointer;
    flex-shrink: 0;
}

/* ── RC bloc ───────────────────────────────────────────────────────────────── */
.es-pf-rc-bloc {
    background: #f5fafa;
    border: 1px solid #ddeaea;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.es-pf-rc-extra {
    padding-top: 0.5rem;
    border-top: 1px solid #ddeaea;
}

/* ── Save row ──────────────────────────────────────────────────────────────── */
.es-pf-save-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid #edf3f3;
    flex-wrap: wrap;
}
.es-pf-btn-save {
    padding: 0.6rem 1.6rem;
    background: #3A595B;
    color: #fff;
    border: none;
    border-radius: 25px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    white-space: nowrap;
}
.es-pf-btn-save:hover  { background: #2d4445; }
.es-pf-btn-save:active { transform: scale(0.97); }
.es-pf-btn-save:disabled { opacity: 0.6; cursor: wait; }

.es-pf-msg {
    display: none;
    font-size: 0.82rem;
    font-weight: 500;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
}
.es-pf-msg--ok    { background: #e8f5e9; color: #2e7d32; display: inline-block; }
.es-pf-msg--error { background: #fdecea; color: #c62828; display: inline-block; }

/* ── Multi-select dins del perfil (reutilitza .es-ms-*) ───────────────────── */
#tab-perfil .es-ms-wrap {
    min-width: 0;
}
#tab-perfil .es-ms-toggle {
    width: 100%;
    height: 2.4rem;
    padding: 0 0.85rem;
    border: 1.5px solid #d0dfdf;
    border-radius: 8px;
    background: #f8fbfb;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.88rem;
    color: #1D3334;
    box-sizing: border-box;
    transition: border-color 0.15s;
    min-width: 0;
    overflow: hidden;
}
#tab-perfil .es-ms-toggle:hover { border-color: #3A595B; }
.es-ms-label-text--placeholder  { color: #8a9fa0; font-weight: 400; }
.es-ms-label-text--selected      { color: #1D3334; font-weight: 500; }
.es-ms-chevron { margin-left: auto; flex-shrink: 0; color: #5a7a7b; }

.es-ms-dropdown {
    position: fixed;
    background: #ffffff;
    border: 1.5px solid #3A595B;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(29,51,52,0.14), 0 2px 8px rgba(0,0,0,0.06);
    z-index: 2147483647;
    padding: 0.35rem 0;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}
body > .es-ms-dropdown { position: fixed; }

.es-ms-option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.85rem;
    cursor: pointer;
    transition: background 0.15s;
    user-select: none;
    font-size: 0.78rem;
    color: #2F2F2F;
    line-height: 1.3;
}
.es-ms-option:hover { background: #f0f5f4; }
.es-ms-option:not(:last-child) { border-bottom: 1px solid #f0f5f4; }

.es-ms-cb { display: none; }

.es-ms-check-icon {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    border: 1.8px solid #c8d5d5;
    border-radius: 4px;
    background: #fff;
    transition: background 0.15s, border-color 0.15s;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.es-ms-cb:checked + .es-ms-check-icon {
    background: #3A595B;
    border-color: #3A595B;
}
.es-ms-cb:checked + .es-ms-check-icon::after {
    content: '';
    display: block;
    width: 9px;
    height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translate(1px, -1px);
}
.es-ms-option-text { flex: 1; }
.es-ms-option:has(.es-ms-cb:checked) {
    background: #f0f8f7;
    color: #1D3334;
    font-weight: 500;
}


/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .es-pf-seccio            { padding: 1.25rem 1rem; }
    .es-pf-grid--2,
    .es-pf-grid--3,
    .es-pf-grid--4c          { grid-template-columns: 1fr; }
    .es-pf-field--span2      { grid-column: span 1; }
    .es-pf-grid--foto        { grid-template-columns: 1fr; }
    .es-pf-foto-wrap         { flex-direction: row; align-items: center; width: auto; }
    .es-pf-foto-preview      { width: 64px; height: 64px; flex-shrink: 0; }
    .es-pf-foto-svg          { width: 64px; height: 64px; }
}

/* ── Tab "El meu perfil" — destacat visualment ─────────────────────────────── */
#es-db-pill-perfil {
    border: 1.5px solid rgba(58, 89, 91, 0.35);
}
#es-db-pill-perfil.is-active {
    background: #3a595b;
    color: #fff;
    border-color: #3a595b;
}

/* ── Nous perfils: targetes ─────────────────────────────────────────────────── */
.es-pf-seccio--afegir { background: #fafaf8; }
.es-pf-nous-perfils {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.es-pf-nou-card {
    border: 1.5px solid #e0d9d0;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.2s;
}
.es-pf-nou-card--activat {
    border-color: #3a595b;
    background: #f0f7f7;
}
.es-pf-nou-card__cap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
}
.es-pf-nou-card__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.es-pf-nou-card__info strong {
    font-size: 0.92rem;
    color: #1e2d2e;
}
.es-pf-nou-card__info span {
    font-size: 0.78rem;
    color: #7a8f8f;
}
.es-pf-nou-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    background: #3a595b;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
    flex-shrink: 0;
}
.es-pf-nou-btn:hover { background: #1D3334; }
.es-pf-nou-chevron { font-size: 0.7em; }
.es-pf-nou-form-wrap {
    padding: 1.25rem;
    border-top: 1px solid #eee;
    background: #fdfdfc;
}
.es-pf-btn-save--nou {
    background: #2b7a6c;
}
.es-pf-btn-save--nou:hover { background: #1e5c50; }
@media (max-width: 480px) {
    .es-pf-nou-card__cap { flex-wrap: wrap; }
    .es-pf-nou-btn       { width: 100%; justify-content: center; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ONBOARDING SPOTLIGHT  ·  "Primer pas: actualitza el perfil"
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Overlay fosc + blur ─────────────────────────────────────────────────── */
.es-ob-overlay {
    position: fixed;
    inset: 0;
    z-index: 100010;
    background: rgba(3, 9, 10, 0.82);
    backdrop-filter: blur(8px) saturate(0.4);
    -webkit-backdrop-filter: blur(8px) saturate(0.4);
    animation: es-ob-fade-in 0.5s ease forwards;
    pointer-events: none;
}
@keyframes es-ob-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Nav elevat per sobre de l'overlay ──────────────────────────────────── */
html.es-ob-active,
body.es-ob-active {
    overflow: hidden;
}
body.es-ob-active .es-db-nav {
    z-index: 100012 !important;
    position: sticky !important;
}

/* ── "La meva activitat" neutralitzada quan overlay activa ──────────────── */
body.es-ob-active .es-db-pill.is-active:not(#es-db-pill-perfil) {
    background: transparent !important;
    color: rgba(30, 45, 46, 0.5) !important;
    box-shadow: none !important;
}

/* ── Pill "El meu perfil" — spotlight pulsant ────────────────────────────── */
body.es-ob-active #es-db-pill-perfil {
    position: relative;
    z-index: 100013;
    background: #3a595b !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow:
        0 0 0 3px #ffffff,
        0 0 0 6px rgba(58, 89, 91, 0.45),
        0 0 32px rgba(58, 89, 91, 0.85);
    animation: es-ob-pill-pulse 2.8s ease-in-out infinite;
    pointer-events: auto;
}
@keyframes es-ob-pill-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 3px rgba(255,255,255,0.95),
            0 0 0 6px rgba(58, 89, 91, 0.4),
            0 0 32px rgba(58, 89, 91, 0.75);
    }
    50% {
        box-shadow:
            0 0 0 4px rgba(255,255,255,0.65),
            0 0 0 10px rgba(58, 89, 91, 0.15),
            0 0 52px rgba(58, 89, 91, 1);
    }
}

/* ── Callout card — posicionada per JS a l'esquerra del pill ─────────────── */
.es-ob-callout {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100014;
    width: 300px;
    max-width: calc(100vw - 40px);
    background: linear-gradient(148deg, #0c1e20 0%, #12292c 55%, #091718 100%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px;
    padding: 26px 24px 22px;
    color: #fff;
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(255, 255, 255, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    animation: es-ob-enter 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: 0.25s;
    pointer-events: auto;
    text-align: left;
    --ob-arrow-top: 50%;
}
/* Shimmer */
.es-ob-callout::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
    border-radius: 18px 18px 0 0;
    pointer-events: none;
}
/* Fletxa → apunta cap al pill (dreta del callout) */
.es-ob-callout::before {
    content: '';
    position: absolute;
    right: -8px;
    top: var(--ob-arrow-top, 50%);
    transform: translateY(-50%) rotate(45deg);
    width: 14px;
    height: 14px;
    background: #12292c;
    border-top: 1px solid rgba(255,255,255,0.09);
    border-right: 1px solid rgba(255,255,255,0.09);
    border-radius: 0 3px 0 0;
}
@keyframes es-ob-enter {
    from {
        opacity: 0;
        transform: translateX(-12px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ── Icona cadenat ──────────────────────────────────────────────────────── */
.es-ob-lock-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(58, 89, 91, 0.2);
    border: 1px solid rgba(58, 89, 91, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 1rem;
    color: #7ab8ba;
}

/* ── Kicker ─────────────────────────────────────────────────────────────── */
.es-ob-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.75rem;
    background: rgba(58, 89, 91, 0.18);
    border: 1px solid rgba(58, 89, 91, 0.35);
    border-radius: 100px;
    padding: 0.25rem 0.7rem 0.25rem 0.35rem;
}
.es-ob-step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3a595b, #5a8082);
    font-size: 0.62rem;
    font-weight: 800;
    font-family: 'Courier New', 'Consolas', monospace;
    color: #fff;
    flex-shrink: 0;
}
.es-ob-step-label {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7ab8ba;
}

/* ── Títol ──────────────────────────────────────────────────────────────── */
.es-ob-title {
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.18;
    color: #fff;
    margin: 0 0 0.5rem;
    letter-spacing: -0.03em;
}

/* ── Descripció ─────────────────────────────────────────────────────────── */
.es-ob-body {
    font-size: 0.83rem;
    line-height: 1.55;
    color: #e8e4de !important;
    margin: 0 0 1rem;
}

/* ── Dots de progrés ────────────────────────────────────────────────────── */
.es-ob-progress {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 1.1rem;
}
.es-ob-progress__dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
}
.es-ob-progress__dot.is-active {
    background: #5a8082;
    width: 18px;
    border-radius: 3px;
}

/* ── CTA ────────────────────────────────────────────────────────────────── */
.es-ob-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.8rem 1rem;
    background: rgba(255,255,255,0.95);
    color: #0c1e20;
    border: none;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    letter-spacing: -0.015em;
    margin-bottom: 0.875rem;
}
.es-ob-cta:hover {
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}
.es-ob-cta:active { transform: translateY(0); }
.es-ob-cta svg { flex-shrink: 0; }

/* ── Nota peu — alabastre ───────────────────────────────────────────────── */
.es-ob-footer-note {
    font-size: 0.74rem;
    color: rgba(232, 228, 222, 0.85) !important;
    margin: 0;
    line-height: 1.5;
}

/* ── Responsive mòbil: centrat a la part inferior ────────────────────────── */
@media (max-width: 540px) {
    .es-ob-callout {
        position: fixed !important;
        top: auto !important;
        bottom: 20px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: calc(100vw - 32px);
        max-width: 380px;
    }
    .es-ob-callout::before { display: none; }
    @keyframes es-ob-enter {
        from { opacity: 0; transform: translateX(-50%) translateY(16px) scale(0.96); }
        to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
    }
}

/* ═══════════════════════════════════════════════════════
   MODAL POST-ONBOARDING — afegir perfils (es-onb2)
   Mateix sistema visual que .es-ob-callout (dark card)
   ═══════════════════════════════════════════════════════ */

/* Overlay de fons — ocult per defecte, visible amb .is-open */
.es-onb2-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(3, 9, 10, 0.82);
    backdrop-filter: blur(8px) saturate(0.4);
    -webkit-backdrop-filter: blur(8px) saturate(0.4);
    align-items: center;
    justify-content: center;
}
.es-onb2-overlay.is-open {
    display: flex;
    animation: es-ob-fade-in 0.5s ease forwards;
}
body.es-onb2-active { overflow: hidden; }

/* Card — reutilitza l'estil fosc del callout */
.es-onb2-card {
    position: relative;
    z-index: 1051;
    width: 340px;
    max-width: calc(100vw - 40px);
    background: linear-gradient(148deg, #0c1e20 0%, #12292c 55%, #091718 100%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px;
    padding: 26px 24px 22px;
    color: #fff;
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(255, 255, 255, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    animation: es-ob-enter 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: 0.1s;
}
/* Shimmer top */
.es-onb2-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
    border-radius: 18px 18px 0 0;
    pointer-events: none;
}
/* Icona check — variació verda del cercle */
.es-onb2-check-icon {
    background: rgba(90, 128, 82, 0.18) !important;
    border-color: rgba(90, 128, 82, 0.45) !important;
    color: #8fc887 !important;
}

/* Llista de perfils disponibles */
.es-onb2-profiles {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.es-onb2-profile-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 0.6rem 0.9rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    user-select: none;
}
.es-onb2-profile-item:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(58, 89, 91, 0.5);
}
.es-onb2-profile-item.is-selected {
    background: rgba(58, 89, 91, 0.22);
    border-color: rgba(58, 89, 91, 0.75);
    box-shadow: 0 0 0 1px rgba(58, 89, 91, 0.35);
}

/* Checkmark dret */
.es-onb2-profile-check {
    margin-left: auto;
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.es-onb2-profile-item.is-selected .es-onb2-profile-check {
    background: #5a8082;
    border-color: #5a8082;
    color: #fff;
}

/* Botó confirmar deshabilitat */
.es-onb2-actions .es-ob-cta:disabled {
    opacity: 0.38;
    cursor: not-allowed;
    pointer-events: none;
}

.es-onb2-profile-icon {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 8px;
    background: rgba(58, 89, 91, 0.25);
    border: 1px solid rgba(58, 89, 91, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7ab8ba;
}
.es-onb2-profile-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.es-onb2-profile-info strong {
    font-size: 0.82rem;
    font-weight: 600;
    color: #f0ebe4;
    white-space: nowrap;
}
.es-onb2-profile-info span {
    font-size: 0.72rem;
    color: rgba(240, 235, 228, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Botons d'acció */
.es-onb2-actions {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-top: 0.25rem;
}
.es-onb2-actions .es-ob-cta {
    width: 100%;
    justify-content: center;
}
.es-onb2-btn-ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: rgba(240, 235, 228, 0.65);
    font-size: 0.82rem;
    font-weight: 500;
    padding: 0.6rem 1rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    text-align: center;
}
.es-onb2-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #f0ebe4;
}

/* Dot "completat" (pas anterior) */
.es-ob-progress__dot.is-done {
    background: #5a8082;
    opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════
   SEGON SPOTLIGHT — Documents (es-ob2-callout)
   ═══════════════════════════════════════════════════════ */
#es-ob2-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(3, 9, 10, 0.82);
    backdrop-filter: blur(8px) saturate(0.4);
    -webkit-backdrop-filter: blur(8px) saturate(0.4);
    animation: es-ob-fade-in 0.5s ease forwards;
}
.es-ob2-callout {
    position: fixed;
    z-index: 1004;
    width: 300px;
    max-width: calc(100vw - 40px);
}
/* Ressaltat pill Documents */
body.es-ob2-docs-active [data-tab="documents"] {
    position: relative;
    z-index: 1003;
    background: #3a595b !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow:
        0 0 0 3px #ffffff,
        0 0 0 6px rgba(58, 89, 91, 0.45),
        0 0 32px rgba(58, 89, 91, 0.85);
    animation: es-ob-pill-pulse 2.8s ease-in-out infinite;
    pointer-events: auto;
}
body.es-ob2-docs-active .es-db-nav {
    z-index: 1002 !important;
    position: sticky !important;
}

@media (max-width: 600px) {
    .es-onb2-card { padding: 1.5rem 1.25rem; }
    .es-ob2-callout { width: calc(100% - 2rem); left: 1rem !important; }
}

/* ═══════════════════════════════════════════════════════
   Historial absències — professor (dashboard activitat)
   ═══════════════════════════════════════════════════════ */

.es-db-bi--absencies .es-abs-historial-card {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(29, 51, 52, 0.1);
}

.es-abs-historial-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.es-abs-historial-head .es-db-bi__label {
    margin-bottom: 0;
}

.es-abs-historial-count {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(29, 51, 52, 0.45);
    background: rgba(29, 51, 52, 0.06);
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
}

.es-abs-historial-scroll {
    max-height: 13rem;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 -0.15rem;
    padding: 0 0.15rem 0.15rem;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.es-abs-historial-scroll::-webkit-scrollbar {
    width: 6px;
}

.es-abs-historial-scroll::-webkit-scrollbar-thumb {
    background: rgba(29, 51, 52, 0.22);
    border-radius: 99px;
}

.es-abs-historial-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.es-abs-historial-placeholder {
    margin: 0;
    padding: 0.65rem 0.5rem;
    font-size: 0.82rem;
    color: rgba(29, 51, 52, 0.55);
    list-style: none;
}

.es-abs-historial-item {
    margin: 0;
    padding: 0.65rem 0.75rem;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(29, 51, 52, 0.1);
    border-radius: 12px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset;
    font-size: 0.78rem;
    line-height: 1.45;
    color: rgba(29, 51, 52, 0.88);
}

.es-abs-historial-row__top {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem 0.75rem;
    margin-bottom: 0.4rem;
}

.es-abs-historial-row__dates {
    font-size: 0.76rem;
    color: rgba(29, 51, 52, 0.75);
}

.es-abs-historial-row__dates strong {
    font-weight: 700;
    color: #1d3334;
}

.es-abs-historial-row__sep {
    font-weight: 400;
    opacity: 0.7;
}

.es-abs-historial-row__motiu {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #8b4a3c;
    white-space: nowrap;
}

.es-abs-historial-row__estat {
    font-size: 0.72rem;
    color: rgba(29, 51, 52, 0.65);
    margin-bottom: 0.35rem;
}

.es-abs-historial-row__k {
    font-weight: 600;
    color: rgba(29, 51, 52, 0.5);
    margin-right: 0.15rem;
}

.es-abs-historial-row__v {
    font-weight: 500;
    color: #2d5a5c;
}

.es-abs-historial-row__classes {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    padding-top: 0.35rem;
    border-top: 1px dashed rgba(29, 51, 52, 0.12);
}

.es-abs-historial-class {
    display: block;
    font-size: 0.74rem;
    padding: 0.28rem 0.45rem;
    background: rgba(58, 89, 91, 0.06);
    border-radius: 8px;
    color: rgba(29, 51, 52, 0.82);
    border-left: 3px solid rgba(58, 89, 91, 0.35);
}

.es-abs-historial-class--empty {
    border-left-color: transparent;
    opacity: 0.65;
    font-style: italic;
}

/* ═══ Els meus alumnes (professor) — nous selectors (no modificar regles anteriors) ═══ */
.es-alumnes-expand {
    grid-column: span 12;
    --color-viridian: var(--es-db-vidrian, #3a595b);
}

.es-alumnes-expand__inner {
    padding: 1.25rem 1.5rem 1.5rem;
    background: #fff;
    border: 1px solid rgba(58, 89, 91, 0.12);
    border-radius: 18px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05);
}

.es-alumnes-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: 1rem;
    max-width: min(420px, 100%);
}

.es-alumnes-field-label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(47, 47, 47, 0.55);
}

.es-alumnes-select {
    width: 100%;
    padding: 0.55rem 0.75rem;
    font-size: 0.95rem;
    color: var(--es-db-ebano, #2f2f2f);
    background: #fafafa;
    border: 1px solid rgba(58, 89, 91, 0.2);
    border-radius: 10px;
    cursor: pointer;
}

.es-alumnes-select:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.es-alumnes-empty {
    margin: 0 0 0.75rem;
    font-size: 0.88rem;
    color: rgba(47, 47, 47, 0.6);
}

.es-alumnes-msg {
    margin: 0 0 0.75rem;
    font-size: 0.88rem;
    color: rgba(47, 47, 47, 0.65);
}

.es-alumnes-msg--error {
    color: #b42318;
}

.es-alumnes-galeria {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.15rem 1rem;
    margin-top: 0.25rem;
}

@media (max-width: 700px) {
    .es-alumnes-galeria {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.es-alumnes-galeria-empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 1rem 0;
    text-align: center;
    font-size: 0.9rem;
    color: rgba(47, 47, 47, 0.55);
}

.es-alumnes-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.55rem;
    min-width: 0;
}

.es-alumnes-card__avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(58, 89, 91, 0.06);
    border: 2px solid rgba(58, 89, 91, 0.12);
}

.es-alumnes-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.es-alumnes-card__avatar--ph {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-color: rgba(58, 89, 91, 0.18);
    background: transparent;
}

.es-alumnes-card__svg {
    width: 100%;
    height: 100%;
    display: block;
}

.es-alumnes-card__name {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.35;
    color: rgba(29, 51, 52, 0.92);
    word-break: break-word;
    max-width: 100%;
}

/* ═══ Les meves derivacions (treballador/a social) — selectors nous ═══ */
.es-deriv-expand {
    grid-column: span 12;
    --color-ocre: var(--es-db-ocre, #8a5443);
    --color-siena: var(--es-db-siena, #da5026);
    --color-viridian: var(--es-db-vidrian, #3a595b);
    --color-alabastre: var(--es-db-alabastro, #e5ddd1);
    --color-blau: #2f6f8f;
}

.es-deriv-expand__inner {
    padding: 1.25rem 1.5rem 1.5rem;
    background: #fff;
    border: 1px solid rgba(58, 89, 91, 0.12);
    border-radius: 18px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05);
}

.es-deriv-wrap {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.es-deriv-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.es-deriv-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    background: var(--color-ocre);
    border-radius: 999px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.12s ease;
}

.es-deriv-new-btn:hover {
    filter: brightness(1.06);
    color: #fff;
}

.es-deriv-msg {
    margin: 0;
    font-size: 0.84rem;
    color: rgba(29, 51, 52, 0.78);
}

.es-deriv-msg--info {
    font-style: italic;
    color: rgba(29, 51, 52, 0.65);
}

.es-deriv-msg--error {
    color: #8b4a3c;
    font-weight: 600;
}

.es-deriv-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    border: 1px solid rgba(58, 89, 91, 0.1);
}

.es-deriv-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.es-deriv-table thead th {
    text-align: left;
    padding: 0.65rem 0.75rem;
    background: rgba(58, 89, 91, 0.06);
    color: rgba(29, 51, 52, 0.85);
    font-weight: 600;
    border-bottom: 1px solid rgba(58, 89, 91, 0.12);
    white-space: nowrap;
}

.es-deriv-table tbody td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid rgba(58, 89, 91, 0.08);
    vertical-align: middle;
    color: rgba(29, 51, 52, 0.9);
}

.es-deriv-row {
    cursor: pointer;
    transition: background 0.12s ease;
}

.es-deriv-row:hover {
    background: rgba(58, 89, 91, 0.04);
}

.es-deriv-row:focus {
    outline: 2px solid var(--color-viridian);
    outline-offset: -2px;
}

.es-deriv-row[aria-expanded="true"] {
    background: rgba(138, 84, 67, 0.06);
}

.es-deriv-badge {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    color: #fff;
}

.es-deriv-badge--ocre {
    background: var(--color-ocre);
    color: var(--color-alabastre);
}

.es-deriv-badge--blau {
    background: var(--color-blau);
    color: #fff;
}

.es-deriv-badge--siena {
    background: var(--color-siena);
    color: #fff;
}

.es-deriv-badge--viridian {
    background: var(--color-viridian);
    color: var(--color-alabastre);
}

.es-deriv-badge--gris {
    background: rgba(29, 51, 52, 0.35);
    color: #fff;
}

.es-deriv-detail__cell {
    padding: 0 !important;
    background: rgba(58, 89, 91, 0.03);
    border-bottom: 1px solid rgba(58, 89, 91, 0.1);
}

.es-deriv-detail__inner {
    padding: 0.85rem 1rem 1rem;
}

.es-deriv-detail__label {
    margin: 0 0 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(29, 51, 52, 0.55);
}

.es-deriv-desc {
    font-size: 0.8rem;
    line-height: 1.5;
    color: rgba(29, 51, 52, 0.88);
}

.es-deriv-desc--empty {
    font-style: italic;
    opacity: 0.65;
}

.es-deriv-desc p {
    margin: 0 0 0.5rem;
}

.es-deriv-desc p:last-child {
    margin-bottom: 0;
}

/* ═══ Pestanya Documents — TS: enllaç formulari derivacions ═══ */
.es-db-ts-derivacio-cta {
    margin-top: 1.25rem;
}

.es-db-ts-derivacio-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem 1.35rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: #fff;
    background: var(--es-db-ocre, #8a5443);
    border-radius: 999px;
    text-decoration: none;
    border: none;
    box-shadow: 0 2px 12px rgba(138, 84, 67, 0.28);
    transition: filter 0.15s ease, transform 0.1s ease;
}

.es-db-ts-derivacio-btn:hover {
    filter: brightness(1.07);
    color: #fff;
}

/* ═══ Derivacions TS v2 (selector + fitxa) — selectors nous ═══ */
.es-dv2-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.65rem;
    align-items: center;
}

.es-dv2-card-nova {
    background: transparent !important;
    color: var(--es-db-ocre, #8a5443) !important;
    border: 2px solid var(--es-db-ocre, #8a5443) !important;
    box-shadow: none !important;
}

.es-dv2-card-nova:hover {
    filter: brightness(1.05);
    color: var(--es-db-ocre, #8a5443) !important;
}

.es-dv2-wrap {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.es-dv2-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(29, 51, 52, 0.75);
    margin-bottom: 0.4rem;
}

.es-dv2-select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0.65rem 0.85rem;
    font-size: 0.88rem;
    border: 1px solid rgba(58, 89, 91, 0.2);
    border-radius: 12px;
    background: #fff;
    color: #1d3334;
}

.es-dv2-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 1rem;
    padding: 0.45rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--es-db-vidrian, #3a595b);
    background: rgba(58, 89, 91, 0.08);
    border: 1px solid rgba(58, 89, 91, 0.15);
    border-radius: 999px;
    cursor: pointer;
}

.es-dv2-back:hover {
    background: rgba(58, 89, 91, 0.12);
}

.es-dv2-cap {
    padding-bottom: 1rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(58, 89, 91, 0.12);
}

.es-dv2-cap__name {
    margin: 0 0 0.35rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1d3334;
}

.es-dv2-cap__meta {
    margin: 0 0 0.75rem;
    font-size: 0.88rem;
    color: rgba(29, 51, 52, 0.7);
}

.es-dv2-cap__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 1rem;
    font-size: 0.82rem;
    color: rgba(29, 51, 52, 0.85);
}

.es-dv2-cap__dies {
    flex: 1 1 200px;
    min-width: 0;
    line-height: 1.4;
}

.es-dv2-cap__semwrap {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.es-dv2-cap__seml {
    font-weight: 600;
    color: rgba(29, 51, 52, 0.55);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.es-dv2-sem {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9) inset;
}

.es-dv2-sem--verd {
    background: #2d8a54;
}

.es-dv2-sem--groc {
    background: #c9a227;
}

.es-dv2-sem--vermell {
    background: #c44c3a;
}

.es-dv2-block {
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(58, 89, 91, 0.14);
}

.es-dv2-block__titol {
    margin: 0 0 0.55rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: #1d3334;
}

.es-dv2-block__hint {
    margin: 0;
    font-size: 0.82rem;
    color: rgba(29, 51, 52, 0.6);
    font-style: italic;
}

.es-dv2-hist {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.84rem;
    line-height: 1.55;
    color: rgba(29, 51, 52, 0.88);
}

.es-dv2-hist__item {
    margin-bottom: 0.28rem;
}

.es-dv2-iate-track {
    height: 12px;
    border-radius: 999px;
    background: rgba(29, 51, 52, 0.08);
    overflow: hidden;
    max-width: 320px;
}

.es-dv2-iate-bar {
    height: 100%;
    border-radius: 999px;
    min-width: 0;
    transition: width 0.35s ease;
}

.es-dv2-iate-bar--vermell {
    background: #c44c3a;
}

.es-dv2-iate-bar--groc {
    background: #c9a227;
}

.es-dv2-iate-bar--verd {
    background: #2d8a54;
}

.es-dv2-iate-val {
    margin: 0.4rem 0 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(29, 51, 52, 0.65);
}

.es-dv2-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.65rem;
}

.es-dv2-stat {
    padding: 0.55rem 0.65rem;
    background: rgba(58, 89, 91, 0.05);
    border-radius: 10px;
    border: 1px solid rgba(58, 89, 91, 0.08);
}

.es-dv2-stat__v {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    color: #1d3334;
}

.es-dv2-stat__k {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: rgba(29, 51, 52, 0.55);
    margin-top: 0.15rem;
}

.es-dv2-notes {
    font-size: 0.84rem;
    line-height: 1.55;
    color: rgba(29, 51, 52, 0.9);
}

.es-dv2-classes {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.84rem;
    line-height: 1.5;
    color: rgba(29, 51, 52, 0.88);
}

.es-dv2-classes__item {
    margin-bottom: 0.3rem;
}

@media (max-width: 520px) {
    .es-dv2-cap__row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ═══ Derivacions TS — prefix .es-der- (timeline, absències, select) ═══ */
.es-der-assign-classes {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding-right: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.es-der-assign-classes__item {
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.45;
}

.es-der-select {
    font-family: ui-monospace, "Cascadia Code", "Consolas", "Lucida Console", monospace;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}

.es-der-tl {
    width: 100%;
}

.es-der-tl__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.35rem;
    margin: 0 -0.25rem;
}

.es-der-tl__row {
    display: flex;
    align-items: flex-start;
    min-width: min-content;
    padding: 0.25rem 0.25rem 0;
}

.es-der-tl__col {
    flex: 0 0 auto;
    min-width: 96px;
    max-width: 150px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.es-der-tl__col--current .es-der-tl__label {
    font-weight: 700;
}

.es-der-tl__col--future .es-der-tl__label {
    color: rgba(29, 51, 52, 0.45);
}

.es-der-tl__nodewrap {
    display: flex;
    justify-content: center;
    margin-bottom: 0.4rem;
}

.es-der-tl__node {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.es-der-tl__node--done {
    background: var(--color-siena, var(--es-db-siena, #da5026));
    border: 2px solid var(--color-siena, var(--es-db-siena, #da5026));
}

.es-der-tl__check::after {
    content: "✓";
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.es-der-tl__node--current {
    width: 28px;
    height: 28px;
    background: var(--color-viridian, var(--es-db-vidrian, #3a595b));
    border: 2px solid var(--color-viridian, var(--es-db-vidrian, #3a595b));
}

.es-der-tl__node--future {
    background: transparent;
    border: 2px solid #cfd6d6;
}

.es-der-tl__label {
    font-size: 0.72rem;
    line-height: 1.3;
    color: rgba(29, 51, 52, 0.88);
    word-break: break-word;
}

.es-der-tl__date {
    font-size: 0.68rem;
    color: rgba(29, 51, 52, 0.52);
    margin-top: 0.2rem;
}

.es-der-tl__col--future .es-der-tl__date {
    color: rgba(29, 51, 52, 0.4);
}

.es-der-tl__motiu {
    font-size: 0.65rem;
    line-height: 1.3;
    color: var(--color-siena, var(--es-db-siena, #da5026));
    margin-top: 0.25rem;
    max-width: 140px;
    word-break: break-word;
}

.es-der-tl__conn {
    flex: 1 1 14px;
    min-width: 10px;
    max-width: 48px;
    height: 3px;
    margin-top: 13px;
    align-self: flex-start;
    border-radius: 2px;
}

.es-der-tl__conn--siena {
    background: var(--color-siena, var(--es-db-siena, #da5026));
}

.es-der-tl__conn--muted {
    background: #dfe6e6;
}

.es-der-abs-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
}

.es-der-abs-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 0.95rem 0.65rem;
    text-align: center;
    border-top: 3px solid transparent;
}

.es-der-abs-card__num {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.05;
    color: var(--color-viridian, var(--es-db-vidrian, #3a595b));
}

.es-der-abs-card__label {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(29, 51, 52, 0.52);
    line-height: 1.25;
}

.es-der-abs-card--total {
    border-top-color: var(--color-viridian, var(--es-db-vidrian, #3a595b));
}

.es-der-abs-card--assist {
    border-top-color: #2ecc71;
}

.es-der-abs-card--avis {
    border-top-color: var(--color-ocre, var(--es-db-ocre, #8a5443));
}

.es-der-abs-card--sense {
    border-top-color: var(--color-siena, var(--es-db-siena, #da5026));
}

.es-der-abs-card--tard {
    border-top-color: #3498db;
}

@media (max-width: 1100px) {
    .es-der-abs-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .es-der-abs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ═══ Derivacions TS: card principal + tauler resum (.es-der-ts / .es-der-board) ═══ */
.es-der-ts-nova {
    margin-top: 0.75rem;
    margin-bottom: 1.2rem;
}

.es-der-ts-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.es-der-ts-opt {
    padding: 1rem 1.15rem;
    border-radius: 14px;
    border: 1px solid rgba(58, 89, 91, 0.14);
    background: rgba(255, 255, 255, 0.72);
}

.es-der-ts-opt__title {
    margin: 0 0 0.35rem;
    font-size: 1.02rem;
    font-weight: 700;
    color: #1d3334;
}

.es-der-ts-opt__desc {
    margin: 0 0 0.8rem;
    font-size: 0.84rem;
    line-height: 1.45;
    color: rgba(29, 51, 52, 0.72);
}

@media (max-width: 700px) {
    .es-der-ts-options {
        grid-template-columns: 1fr;
    }
}

.es-der-board-view {
    width: 100%;
}

.es-der-board__toolbar {
    margin-bottom: 0.75rem;
}

.es-der-board__filter {
    width: 100%;
    max-width: 420px;
    padding: 0.55rem 0.85rem;
    font-size: 0.88rem;
    border: 1px solid rgba(58, 89, 91, 0.2);
    border-radius: 10px;
    box-sizing: border-box;
}

.es-der-board__scroll-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(58, 89, 91, 0.1);
    background: #fff;
}

.es-der-board__table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: 0.84rem;
    color: #1d3334;
}

.es-der-board__th {
    background: var(--color-viridian, var(--es-db-vidrian, #3a595b));
    color: #fff;
    font-weight: 600;
    text-align: left;
    padding: 0.7rem 0.8rem;
    user-select: none;
    white-space: nowrap;
}

.es-der-board__tr:nth-child(even) {
    background: rgba(58, 89, 75, 0.04);
}

.es-der-board__tr:nth-child(odd) {
    background: #fff;
}

.es-der-board__tr:hover {
    background: rgba(58, 89, 75, 0.08);
}

.es-der-board__td {
    padding: 0.55rem 0.8rem;
    vertical-align: top;
    line-height: 1.4;
}

.es-der-board__td--activ {
    white-space: normal;
    word-break: break-word;
    max-width: 280px;
}

.es-der-board__empty {
    text-align: center;
    padding: 2rem 1rem;
    margin: 0;
    font-size: 0.92rem;
    color: rgba(29, 51, 52, 0.62);
}

.es-der-board__badge {
    display: inline-block;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.25;
    color: #fff;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
}

.es-der-board__badge--ocre {
    background: var(--color-ocre, var(--es-db-ocre, #8a5443));
}

.es-der-board__badge--blau {
    background: #2f6f8f;
}

.es-der-board__badge--siena {
    background: var(--color-siena, var(--es-db-siena, #da5026));
}

.es-der-board__badge--verd {
    background: #2ecc71;
    color: #143d28;
}

.es-der-board__badge--viridian {
    background: var(--color-viridian, var(--es-db-vidrian, #3a595b));
}

.es-der-board__badge--grisblau {
    background: #5a6d7e;
}

.es-der-board__badge--grisfosc {
    background: #7a8282;
}

.es-der-board__badge--gris {
    background: #95a5a6;
    color: #fff;
}

.es-der-board__badge--vermell {
    background: #c0392b;
}

/* IATE column + llegenda (tauler derivacions TS) — prefix .es-der- */
.es-der-iate-legend {
    margin: 0.35rem 0 0.5rem;
    font-size: 0.72rem;
    font-style: italic;
    color: rgba(29, 51, 52, 0.55);
    line-height: 1.35;
}

.es-der-iate-th {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    white-space: normal;
    vertical-align: top;
}

.es-der-iate-th__sub {
    display: block;
    font-size: 0.7rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.25;
}

.es-der-iate-cell {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.es-der-iate-cell__track {
    flex: 1 1 auto;
    min-width: 72px;
    max-width: 140px;
    height: 6px;
    border-radius: 3px;
    background: #e8eaeb;
    overflow: hidden;
}

.es-der-iate-cell__fill {
    height: 100%;
    border-radius: 3px;
    max-width: 100%;
}

.es-der-iate-cell__fill--vermell {
    background: #e74c3c;
}

.es-der-iate-cell__fill--groc {
    background: #f39c12;
}

.es-der-iate-cell__fill--verd {
    background: #2ecc71;
}

.es-der-iate-cell__val {
    font-size: 0.85rem;
    font-weight: 600;
    flex-shrink: 0;
    color: inherit;
}

.es-der-iate-cell__empty {
    font-style: italic;
    color: rgba(29, 51, 52, 0.5);
    font-size: 0.88rem;
}

/* ═══ Passar llista IATE (professor, classes subvencionades) — prefix .es-iate- ═══ */
.es-iate-expand {
    grid-column: span 12;
}

.es-iate-expand__inner {
    position: relative;
    padding: 1.25rem 1.5rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border: 1px solid rgba(58, 89, 91, 0.12);
    border-radius: 18px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05);
}

.es-iate-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: 1rem;
    max-width: min(440px, 100%);
}

.es-iate-field-label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(47, 47, 47, 0.55);
}

.es-iate-select,
.es-iate-date {
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    font-size: 0.95rem;
    color: var(--es-db-ebano, #2f2f2f);
    background: #fafafa;
    border: 1px solid rgba(58, 89, 91, 0.2);
    border-radius: 10px;
    box-sizing: border-box;
}

.es-iate-btn-load {
    min-height: 48px;
    margin-top: 0.35rem;
    padding: 0 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    background: var(--es-db-vidrian, #3a595b);
    border: none;
    border-radius: 12px;
    cursor: pointer;
}

.es-iate-btn-load:active {
    opacity: 0.92;
}

.es-iate-msg {
    margin: 0 0 0.75rem;
    font-size: 0.88rem;
    color: rgba(47, 47, 47, 0.65);
}

.es-iate-msg--error {
    color: #b42318;
}

.es-iate-list-scroll {
    max-height: none;
    margin-bottom: 0.5rem;
}

.es-iate-legend-ov {
    position: fixed;
    inset: 0;
    z-index: 100060;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
}

.es-iate-legend-ov[hidden] {
    display: none !important;
}

.es-iate-legend-ov__backdrop {
    position: absolute;
    inset: 0;
    border: none;
    padding: 0;
    margin: 0;
    background: rgba(20, 28, 30, 0.45);
    cursor: pointer;
}

.es-iate-legend-ov__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    max-height: min(72vh, 520px);
    overflow: auto;
    padding: 1rem 1.1rem 1.25rem;
    background: #fff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
}

@media (min-width: 480px) {
    .es-iate-legend-ov {
        align-items: center;
    }

    .es-iate-legend-ov__panel {
        border-radius: 16px;
    }
}

.es-iate-legend-ov__title {
    margin: 0 0 0.65rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--es-db-ebano, #2f2f2f);
}

.es-iate-legend-ov__sec {
    margin: 0.75rem 0 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(47, 47, 47, 0.55);
}

.es-iate-legend-ov__sec:first-child {
    margin-top: 0;
}

.es-iate-legend-ov__ul {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.86rem;
    line-height: 1.45;
    color: #333;
}

.es-iate-legend-ov__close {
    margin-top: 1rem;
    width: 100%;
    min-height: 44px;
    font-weight: 600;
    font-size: 0.92rem;
    color: #fff;
    background: var(--es-db-vidrian, #3a595b);
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

.es-iate-alumnes-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.es-iate-row {
    position: relative;
    padding: 12px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(58, 89, 91, 0.1);
}

.es-iate-row__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.es-iate-thumb {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.es-iate-mono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    flex-shrink: 0;
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    background: var(--color-viridian, var(--es-db-vidrian, #3a595b));
    letter-spacing: -0.02em;
}

.es-iate-row__name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--es-db-ebano, #2f2f2f);
    line-height: 1.25;
    min-width: 0;
}

.es-iate-states {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    margin-bottom: 6px;
    width: 100%;
}

.es-iate-state-hit {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 4px 0;
    box-sizing: border-box;
}

.es-iate-state-btn {
    width: 100%;
    max-height: 36px;
    min-height: 32px;
    padding: 0 8px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.15;
    border-radius: 8px;
    border: 1px solid #d5d8da;
    cursor: pointer;
    background: #fff;
    color: #444;
    text-align: center;
    box-sizing: border-box;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.es-iate-state--assisteix {
    border-color: #c5cbcf;
    color: var(--color-viridian, var(--es-db-vidrian, #3a595b));
}

.es-iate-state--assisteix.es-iate-toggle--on {
    background: var(--color-viridian, var(--es-db-vidrian, #3a595b));
    color: #fff;
    border-color: var(--color-viridian, var(--es-db-vidrian, #3a595b));
}

.es-iate-state--tard {
    border-color: #c5cbcf;
    color: var(--color-ocre, var(--es-db-ocre, #8a5443));
}

.es-iate-state--tard.es-iate-toggle--on {
    background: var(--color-ocre, var(--es-db-ocre, #8a5443));
    color: #fff;
    border-color: var(--color-ocre, var(--es-db-ocre, #8a5443));
}

.es-iate-state--noavisa {
    border-color: #c5cbcf;
    color: #c96515;
}

.es-iate-state--noavisa.es-iate-toggle--on {
    background: #e67e22;
    color: #fff;
    border-color: #e67e22;
}

.es-iate-state--nosense {
    border-color: #c5cbcf;
    color: var(--color-siena, var(--es-db-siena, #da5026));
}

.es-iate-state--nosense.es-iate-toggle--on {
    background: var(--color-siena, var(--es-db-siena, #da5026));
    color: #fff;
    border-color: var(--color-siena, var(--es-db-siena, #da5026));
}

.es-iate-state--just {
    border-color: #c5cbcf;
    color: #7f8c8d;
}

.es-iate-state--just.es-iate-toggle--on {
    background: #7f8c8d;
    color: #fff;
    border-color: #7f8c8d;
}

.es-iate-legend-link {
    display: block;
    width: 100%;
    margin: 0 0 8px;
    padding: 0.35rem 0;
    border: none;
    background: none;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--es-db-vidrian, #3a595b);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    text-align: left;
}

.es-iate-iatepanel {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid rgba(58, 89, 91, 0.12);
}

.es-iate-iatepanel__title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-viridian, var(--es-db-vidrian, #3a595b));
    margin-bottom: 8px;
}

.es-iate-trim-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.es-iate-trim-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(47, 47, 47, 0.65);
    flex-shrink: 0;
}

.es-iate-trim-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.es-iate-trim-btn {
    min-width: 36px;
    height: 28px;
    padding: 0 6px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid #cfd3d6;
    background: #fff;
    color: #444;
    cursor: pointer;
    box-sizing: border-box;
}

.es-iate-trim-btn.es-iate-toggle--on {
    background: var(--color-viridian, var(--es-db-vidrian, #3a595b));
    color: #fff;
    border-color: var(--color-viridian, var(--es-db-vidrian, #3a595b));
}

.es-iate-mtable {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.8rem;
}

.es-iate-mtr + .es-iate-mtr .es-iate-mtd-l,
.es-iate-mtr + .es-iate-mtr .es-iate-mtd-r {
    border-top: 1px solid rgba(58, 89, 91, 0.08);
}

.es-iate-mtd-l {
    width: 62%;
    vertical-align: top;
    padding: 8px 8px 8px 0;
}

.es-iate-mtd-r {
    width: 38%;
    vertical-align: middle;
    text-align: right;
    padding: 6px 0;
    white-space: nowrap;
}

.es-iate-mt-title {
    font-weight: 700;
    font-size: 0.8rem;
    line-height: 1.25;
    color: var(--es-db-ebano, #2f2f2f);
}

.es-iate-subtip {
    display: block;
    width: 100%;
    margin-top: 2px;
    padding: 2px 0;
    border: none;
    background: none;
    font-size: 0.7rem;
    font-style: italic;
    font-weight: 400;
    color: rgba(47, 47, 47, 0.52);
    text-align: left;
    cursor: pointer;
    line-height: 1.3;
}

.es-iate-subtip:hover,
.es-iate-subtip:focus-visible {
    color: var(--es-db-vidrian, #3a595b);
    outline: none;
}

.es-iate-subtip-pop {
    margin: 4px 0 6px;
    padding: 6px 8px;
    font-size: 0.68rem;
    line-height: 1.4;
    color: #333;
    background: #f4f6f7;
    border-radius: 6px;
    border: 1px solid rgba(58, 89, 91, 0.12);
}

.es-iate-subtip-pop__line + .es-iate-subtip-pop__line {
    margin-top: 4px;
}

.es-iate-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: 4px;
    padding: 0;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 6px;
    border: 1px solid #cfd3d6;
    background: #fff;
    color: #444;
    cursor: pointer;
    box-sizing: border-box;
    vertical-align: middle;
}

.es-iate-score:first-of-type {
    margin-left: 0;
}

.es-iate-score.es-iate-toggle--on {
    background: var(--color-viridian, var(--es-db-vidrian, #3a595b));
    color: #fff;
    border-color: var(--color-viridian, var(--es-db-vidrian, #3a595b));
}

.es-iate-obs-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px;
    margin-top: 8px;
}

.es-iate-obs-lab {
    flex-shrink: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(47, 47, 47, 0.6);
    padding-top: 6px;
}

.es-iate-textarea {
    width: 100%;
    min-height: 72px;
    padding: 0.5rem 0.55rem;
    font-size: 0.88rem;
    border: 1px solid rgba(58, 89, 91, 0.22);
    border-radius: 8px;
    resize: vertical;
    box-sizing: border-box;
}

.es-iate-textarea--sm {
    min-height: 52px;
    flex: 1 1 180px;
    font-size: 0.82rem;
}

.es-iate-save-bar {
    position: sticky;
    bottom: 0;
    z-index: 8;
    margin: 1rem -0.25rem 0;
    padding: 0.65rem 0.25rem calc(0.65rem + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 28%);
}

.es-iate-btn-save {
    width: 100%;
    min-height: 52px;
    padding: 0 1rem;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    background: var(--es-db-siena, #da5026);
    border: none;
    border-radius: 14px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(218, 80, 38, 0.28);
}

.es-iate-btn-save:active {
    opacity: 0.94;
}

/* IATE — add-ons UI (només classes noves .es-iate-*; no alterar regles anteriors) */
.es-iate-states--fulltxt {
    flex-wrap: wrap;
    gap: 8px;
}

.es-iate-state-hit--fulltxt {
    flex: 1 1 auto;
    min-width: min(100%, 140px);
    min-height: auto;
    padding: 0;
}

.es-iate-state-btn--fulltxt {
    width: 100%;
    max-height: none;
    min-height: 40px;
    padding: 8px 10px;
    font-size: 0.72rem;
    white-space: normal;
    hyphens: auto;
}

.es-iate-mtable--pgrid .es-iate-mtr--phead .es-iate-mtd-l--phead,
.es-iate-mtable--pgrid .es-iate-mtr--phead .es-iate-mtd-r--phead {
    border-bottom: 1px solid rgba(58, 89, 91, 0.1);
    padding-bottom: 6px;
    vertical-align: bottom;
}

.es-iate-pgrid-head {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 12px;
    min-width: 0;
}

.es-iate-pgrid-head__cell {
    flex: 0 0 60px;
    width: 60px;
    box-sizing: border-box;
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(47, 47, 47, 0.48);
    text-align: center;
    line-height: 1.2;
}

.es-iate-mt-desc {
    display: block;
    margin-top: 3px;
    font-size: 0.7rem;
    font-style: italic;
    font-weight: 400;
    color: rgba(47, 47, 47, 0.52);
    line-height: 1.35;
}

.es-iate-mtd-r--pgrid {
    text-align: left;
    vertical-align: middle;
    white-space: normal;
}

.es-iate-pgrid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.es-iate-pbtn {
    flex: 0 0 60px;
    width: 60px;
    height: 36px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    border-radius: 8px;
    border: 1px solid #ddd;
    background: #fff;
    color: #444;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.es-iate-pbtn.es-iate-toggle--on {
    background: var(--color-viridian, var(--es-db-vidrian, #3a595b));
    color: #fff;
    border-color: var(--color-viridian, var(--es-db-vidrian, #3a595b));
}

.es-iate-mtable--pgrid .es-iate-pbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.es-iate-save-feedback--ok {
    margin-bottom: 10px;
    padding: 12px;
    font-size: 0.92rem;
    font-weight: 600;
    color: #14532d;
    background: #ecfdf3;
    border: 1px solid #16a34a;
    border-radius: 8px;
}

.es-iate-save-feedback--error {
    margin-bottom: 10px;
    padding: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #b42318;
    background: #fef2f2;
    border: 1px solid #f87171;
    border-radius: 8px;
}

.es-iate-btn-save--innerflex {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.es-iate-btn-save--busy {
    cursor: wait;
}

.es-iate-btn-save--success {
    background: #15803d !important;
    box-shadow: 0 4px 14px rgba(21, 128, 61, 0.35) !important;
}

.es-iate-btn-save__dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.es-iate-btn-save__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.35;
    animation: es-iate-save-dot 0.9s ease-in-out infinite;
}

.es-iate-btn-save__dot:nth-child(2) {
    animation-delay: 0.15s;
}

.es-iate-btn-save__dot:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes es-iate-save-dot {
    0%,
    80%,
    100% {
        opacity: 0.25;
        transform: scale(0.85);
    }

    40% {
        opacity: 1;
        transform: scale(1);
    }
}

/* IATE — observacions sessió + layout mòbil indicadors (classes noves) */
.es-iate-textarea--sessio {
    width: 100%;
    min-height: 60px;
    padding: 8px;
    font-size: 0.875rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-sizing: border-box;
}

.es-iate-pbtn__d {
    display: block;
    pointer-events: none;
}

.es-iate-pbtn__m {
    display: none;
    pointer-events: none;
}

@media (max-width: 600px) {
    .es-iate-mtable--pgrid.es-iate-mtable--stack-sm,
    .es-iate-mtable--pgrid.es-iate-mtable--stack-sm tbody,
    .es-iate-mtable--pgrid.es-iate-mtable--stack-sm .es-iate-mtr:not(.es-iate-mtr--phead) {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .es-iate-mtable--pgrid.es-iate-mtable--stack-sm .es-iate-mtr--phead {
        display: none !important;
    }

    .es-iate-mtable--pgrid.es-iate-mtable--stack-sm .es-iate-mtr:not(.es-iate-mtr--phead) {
        margin-bottom: 10px;
    }

    .es-iate-mtable--pgrid.es-iate-mtable--stack-sm .es-iate-mtr:not(.es-iate-mtr--phead):last-of-type {
        margin-bottom: 0;
    }

    .es-iate-mtable--pgrid.es-iate-mtable--stack-sm .es-iate-mtd-l,
    .es-iate-mtable--pgrid.es-iate-mtable--stack-sm .es-iate-mtd-r {
        display: block;
        width: 100%;
        padding: 0;
        border-top: none !important;
        text-align: left;
    }

    .es-iate-mtable--pgrid.es-iate-mtable--stack-sm .es-iate-mtd-l {
        padding-bottom: 6px;
    }

    .es-iate-mtable--pgrid.es-iate-mtable--stack-sm .es-iate-mt-title {
        font-weight: 700;
    }

    .es-iate-mtable--pgrid.es-iate-mtable--stack-sm .es-iate-mt-desc {
        display: block;
        margin-top: 4px;
    }

    .es-iate-mtable--pgrid.es-iate-mtable--stack-sm .es-iate-pgrid {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: stretch;
        gap: 8px;
        width: 100%;
    }

    .es-iate-mtable--pgrid.es-iate-mtable--stack-sm .es-iate-pbtn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 0 0 calc(33.333% - 8px);
        width: calc(33.333% - 8px);
        max-width: calc(33.333% - 8px);
        min-width: 0;
        height: 40px;
        padding: 2px 4px;
        font-size: 0.62rem;
        font-weight: 600;
        line-height: 1.12;
        white-space: normal;
        text-align: center;
    }

    .es-iate-mtable--pgrid.es-iate-mtable--stack-sm .es-iate-pbtn__d {
        display: none;
    }

    .es-iate-mtable--pgrid.es-iate-mtable--stack-sm .es-iate-pbtn__m {
        display: block;
    }
}

/* IATE — fila observacions només textarea (sense etiqueta Obs:) */
.es-iate-obs-row--solo-ta {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(58, 89, 91, 0.1);
    box-sizing: border-box;
}

.es-iate-obs-row--solo-ta .es-iate-textarea--sessio {
    display: block;
    margin: 0;
    flex: none;
    min-height: 60px;
}

/* Els punts animats només quan no estan amagats: [hidden] ha de prevaldre sobre display:inline-flex */
.es-iate-btn-save__dots[hidden] {
    display: none !important;
    visibility: hidden;
    pointer-events: none;
}

/* IATE — historial de sessions (classe subvencionada) */
.es-iate-historial {
    margin: 0 0 12px;
    box-sizing: border-box;
}

.es-iate-historial__title {
    margin: 0 0 6px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(47, 47, 47, 0.55);
}

.es-iate-historial__box {
    padding: 8px 10px;
    border: 1px solid rgba(58, 89, 91, 0.14);
    border-radius: 10px;
    background: #fafbfc;
    box-sizing: border-box;
}

.es-iate-historial__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    padding: 5px 0;
    font-size: 0.82rem;
    line-height: 1.35;
    border-bottom: 1px solid rgba(58, 89, 91, 0.08);
    color: var(--es-db-ebano, #2f2f2f);
}

.es-iate-historial__row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.es-iate-historial__row:first-child {
    padding-top: 0;
}

.es-iate-historial__row--ok {
    color: #166534;
    font-weight: 600;
}

.es-iate-historial__row--sense {
    color: #9a3412;
    font-weight: 500;
}

.es-iate-historial__row--festiu {
    color: rgba(47, 47, 47, 0.45);
    font-style: italic;
}

.es-iate-historial__row--futura {
    color: #1d4ed8;
    font-weight: 600;
}

.es-iate-historial__reg {
    flex-shrink: 0;
    margin-left: auto;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    background: var(--es-db-siena, #da5026);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    box-sizing: border-box;
}

.es-iate-historial__reg:active {
    opacity: 0.92;
}

/* ═══ Terapeuta — sessions (prefix .es-ter-) ═══ */
.es-ter-card__opts {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.25rem;
    margin-top: 0.85rem;
    align-items: stretch;
}

.es-ter-card__opt {
    flex: 1 1 220px;
    min-width: 0;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(58, 89, 91, 0.12);
    box-sizing: border-box;
}

.es-ter-card__opt-title {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--es-db-ebano, #2f2f2f);
}

.es-ter-card__opt-desc {
    margin: 0 0 0.65rem;
    font-size: 0.82rem;
    line-height: 1.4;
    color: rgba(47, 47, 47, 0.72);
}

.es-ter-card__cta {
    margin-top: 0.25rem;
}

.es-ter-card__cta--secondary {
    background: transparent !important;
    color: var(--color-viridian, var(--es-db-vidrian, #3a595b)) !important;
    border: 2px solid var(--color-viridian, var(--es-db-vidrian, #3a595b)) !important;
    box-shadow: none !important;
}

.es-ter-expand {
    grid-column: span 12;
}

.es-ter-expand__inner {
    position: relative;
    padding: 1.15rem 1.35rem calc(1.15rem + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border: 1px solid rgba(58, 89, 91, 0.12);
    border-radius: 18px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
}

.es-ter-expand__title {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--es-db-ebano, #2f2f2f);
}

.es-ter-msg {
    margin: 0 0 0.65rem;
    font-size: 0.88rem;
    color: rgba(47, 47, 47, 0.65);
}

.es-ter-msg--error {
    color: #b42318;
}

.es-ter-hist-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.65rem 1rem;
    margin-bottom: 0.75rem;
}

.es-ter-hist-toolbar__grp {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: min(160px, 100%);
}

.es-ter-field-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(47, 47, 47, 0.55);
}

.es-ter-select {
    min-height: 44px;
    padding: 0.45rem 0.65rem;
    font-size: 0.9rem;
    border: 1px solid rgba(58, 89, 91, 0.2);
    border-radius: 10px;
    background: #fafafa;
    color: var(--es-db-ebano, #2f2f2f);
    box-sizing: border-box;
}

.es-ter-btn-load {
    min-height: 44px;
    padding: 0 1.1rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: #fff;
    background: var(--color-viridian, var(--es-db-vidrian, #3a595b));
    border: none;
    border-radius: 10px;
    cursor: pointer;
    box-sizing: border-box;
}

.es-ter-btn-load:active {
    opacity: 0.93;
}

.es-ter-hist-scroll {
    margin-top: 0.25rem;
}

.es-ter-hist-mount {
    min-height: 2rem;
}

.es-ter-properes-mount {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.es-ter-empty {
    margin: 0;
    padding: 1rem 0.25rem;
    font-size: 0.9rem;
    color: rgba(47, 47, 47, 0.55);
    font-style: italic;
}

.es-ter-sess-card {
    padding: 1rem 1.1rem;
    background: #fff;
    border-radius: 12px;
    border: 1px solid rgba(58, 89, 91, 0.1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
}

.es-ter-sess-card__datetime {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-viridian, var(--es-db-vidrian, #3a595b));
    margin-bottom: 0.45rem;
    line-height: 1.3;
}

.es-ter-sess-card__client {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--es-db-ebano, #2f2f2f);
    margin-bottom: 0.35rem;
}

.es-ter-sess-card__row {
    font-size: 0.84rem;
    color: rgba(47, 47, 47, 0.78);
    line-height: 1.45;
    margin-bottom: 0.2rem;
}

.es-ter-sess-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 1rem;
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(58, 89, 91, 0.08);
}

.es-ter-sess-card__lab {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(47, 47, 47, 0.55);
    margin-right: 0.25rem;
}

.es-ter-sess-card__preu {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--es-db-ebano, #2f2f2f);
}

.es-ter-hist-table {
    margin: 0;
}

.es-ter-hist__totals .es-der-board__td {
    background: rgba(58, 89, 91, 0.1);
    font-weight: 700;
    color: var(--es-db-ebano, #2f2f2f);
    border-top: 1px solid rgba(58, 89, 91, 0.15);
}

/* Terapeuta — sala a cards / taula (nous, prefix .es-ter-) */
.es-ter-sess-card__sala {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.84rem;
    color: rgba(47, 47, 47, 0.78);
    line-height: 1.4;
    margin-bottom: 0.45rem;
}

.es-ter-sess-card__sala-icon {
    flex-shrink: 0;
    color: rgba(58, 89, 91, 0.72);
}

.es-ter-sess-card__sala-name {
    min-width: 0;
}

.es-ter-hist__td-sala {
    max-width: 10rem;
    word-break: break-word;
}

/* Terapeuta — toggle llista/calendari, FullCalendar, popup detall */
.es-ter-properes-toolbar--views {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0 1rem;
}

.es-ter-view-toggle {
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(58, 89, 91, 0.35);
    background: #fff;
    color: var(--es-db-ebano, #2f2f2f);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.es-ter-view-toggle:hover {
    border-color: rgba(58, 89, 91, 0.55);
    background: rgba(58, 89, 91, 0.06);
}

.es-ter-view-toggle.is-active {
    background: var(--color-viridian, #3a595b);
    border-color: var(--color-viridian, #3a595b);
    color: #fff;
}

.es-ter-properes-view-cal {
    margin-top: 0.25rem;
}

.es-ter-fc {
    min-height: 28rem;
    --fc-border-color: rgba(58, 89, 91, 0.12);
    --fc-button-bg-color: #3a595b;
    --fc-button-border-color: #3a595b;
    --fc-button-hover-bg-color: #2d4749;
    --fc-button-hover-border-color: #2d4749;
    --fc-today-bg-color: rgba(58, 89, 91, 0.08);
}

.es-ter-fc .fc {
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.82rem;
}

.es-ter-fc-popup {
    position: fixed;
    inset: 0;
    z-index: 100060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
}

.es-ter-fc-popup__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    margin: 0;
    background: rgba(15, 23, 23, 0.45);
    cursor: pointer;
}

.es-ter-fc-popup__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 22rem;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    padding: 1.15rem 1.2rem 1rem;
    box-sizing: border-box;
    border: 1px solid rgba(58, 89, 91, 0.12);
}

.es-ter-fc-popup__close {
    position: absolute;
    top: 0.4rem;
    right: 0.45rem;
    width: 2rem;
    height: 2rem;
    border: 0;
    background: transparent;
    font-size: 1.45rem;
    line-height: 1;
    color: rgba(47, 47, 47, 0.45);
    cursor: pointer;
    border-radius: 6px;
}

.es-ter-fc-popup__close:hover {
    color: var(--es-db-ebano, #2f2f2f);
    background: rgba(58, 89, 91, 0.08);
}

.es-ter-fc-popup__row {
    display: grid;
    grid-template-columns: 5.2rem 1fr;
    gap: 0.35rem 0.65rem;
    font-size: 0.86rem;
    line-height: 1.4;
    margin-bottom: 0.5rem;
}

.es-ter-fc-popup__row:last-child {
    margin-bottom: 0;
}

.es-ter-fc-popup__lab {
    font-weight: 600;
    color: rgba(47, 47, 47, 0.5);
}

.es-ter-fc-popup__val {
    color: var(--es-db-ebano, #2f2f2f);
    word-break: break-word;
}

/* Terapeuta — vista llista/calendari (outline viridian, sense emoji) */
.es-ter-view-switch__btn {
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    cursor: pointer;
    box-sizing: border-box;
    min-height: 44px;
    background: transparent;
    color: var(--color-viridian, var(--es-db-vidrian, #3a595b));
    border: 2px solid var(--color-viridian, var(--es-db-vidrian, #3a595b));
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.es-ter-view-switch__btn:hover {
    background: rgba(58, 89, 91, 0.08);
}

.es-ter-view-switch__btn.is-active {
    background: var(--color-viridian, var(--es-db-vidrian, #3a595b));
    color: #fff;
    border-color: var(--color-viridian, var(--es-db-vidrian, #3a595b));
}

/* FullCalendar — events compactes + cursor/hover (M2–M3) */
.es-ter-properes-calendar {
    --fc-event-border-color: transparent;
    --fc-event-text-color: #fff;
    --fc-event-bg-color: var(--color-viridian, #3a595b);
}

.es-ter-properes-calendar .fc-event {
    cursor: pointer;
    transition: filter 0.15s ease;
}

.es-ter-properes-calendar .fc-event:hover {
    filter: brightness(1.15);
}

.es-ter-properes-calendar .fc-timegrid-event {
    border-radius: 6px;
    overflow: hidden;
}

.es-ter-properes-calendar .fc-timegrid-event .fc-event-main {
    overflow: hidden;
}

.es-ter-properes-calendar .es-ter-fc-event-body {
    display: flex;
    align-items: center;
    font-family: "DM Sans", system-ui, sans-serif;
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1.25;
    padding: 4px 6px;
    border-radius: 6px;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 100%;
}

.es-ter-properes-calendar .es-ter-fc-event-time {
    flex-shrink: 0;
    margin-right: 4px;
}

.es-ter-properes-calendar .es-ter-fc-event-title {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Popup detall sessió (redisseny M4) */
@keyframes es-ter-sess-popup-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes es-ter-sess-popup-rise {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.es-ter-sess-popup {
    position: fixed;
    inset: 0;
    z-index: 100070;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
    animation: es-ter-sess-popup-fade 0.2s ease forwards;
}

.es-ter-sess-popup__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    margin: 0;
    background: rgba(15, 23, 23, 0.5);
    cursor: pointer;
}

.es-ter-sess-popup__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    min-width: 280px;
    max-width: 340px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    padding: 20px;
    box-sizing: border-box;
    border: 1px solid rgba(58, 89, 91, 0.1);
    animation: es-ter-sess-popup-rise 0.2s ease forwards;
}

.es-ter-sess-popup__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding-right: 1.75rem;
    margin-bottom: 0.65rem;
}

.es-ter-sess-popup__title {
    margin: 0;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-viridian, var(--es-db-vidrian, #3a595b));
}

.es-ter-sess-popup__x {
    position: absolute;
    top: 14px;
    right: 12px;
    width: 2rem;
    height: 2rem;
    border: 0;
    background: transparent;
    font-size: 1.4rem;
    line-height: 1;
    color: rgba(47, 47, 47, 0.4);
    cursor: pointer;
    border-radius: 6px;
}

.es-ter-sess-popup__x:hover {
    color: var(--es-db-ebano, #2f2f2f);
    background: rgba(58, 89, 91, 0.06);
}

.es-ter-sess-popup__rule {
    height: 1px;
    background: rgba(58, 89, 91, 0.12);
    margin: 0 0 0.85rem;
}

.es-ter-sess-popup__body {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.es-ter-sess-popup__item {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--es-db-ebano, #2f2f2f);
}

.es-ter-sess-popup__item-ic {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(58, 89, 91, 0.75);
}

.es-ter-sess-popup__svg {
    display: block;
}

.es-ter-sess-popup__item-txt {
    min-width: 0;
    word-break: break-word;
}

/* Historial — resum per forma de pagament (M5) */
.es-ter-hist-resum {
    margin-top: 1.35rem;
    padding-top: 0.25rem;
}

.es-ter-hist-resum__title {
    margin: 0 0 0.65rem;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--es-db-ebano, #2f2f2f);
}

.es-ter-hist-resum__table {
    margin: 0;
}

.es-ter-hist-resum__tr--total .es-der-board__td {
    background: rgba(58, 89, 91, 0.08);
    border-top: 1px solid rgba(58, 89, 91, 0.12);
}

/* Terapeuta FC — cel·la dues línies (hora + client), tipografia, eix hores */
.es-ter-properes-calendar .fc-timegrid-event .fc-event-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 2px;
}

.es-ter-properes-calendar .es-ter-ev-hora,
.es-ter-properes-calendar .es-ter-ev-client {
    font-family: "DM Sans", sans-serif;
    font-weight: 300;
    font-size: 0.72rem;
    line-height: 1.3;
    color: inherit;
}

.es-ter-properes-calendar .es-ter-ev-hora {
    flex-shrink: 0;
}

.es-ter-properes-calendar .es-ter-ev-client {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow-wrap: break-word;
    word-break: break-word;
    text-overflow: ellipsis;
    white-space: normal;
}

.es-ter-properes-calendar .fc-event-title,
.es-ter-properes-calendar .fc-event-main {
    font-weight: 300 !important;
    font-size: 0.72rem !important;
}

.es-ter-properes-calendar .fc-timegrid-slot-label,
.es-ter-properes-calendar .fc-timegrid-slot-label-cushion {
    font-size: 0.65rem;
    font-weight: 400;
    color: rgba(47, 47, 47, 0.52);
}

@media (max-height: 500px) and (orientation: landscape) {
    .es-ter-properes-calendar {
        height: 70vh;
        overflow-y: auto;
    }

    .es-ter-properes-calendar .fc .fc-view-harness {
        height: auto !important;
    }
}

/* Terapeuta — llegenda de colors per sala (vista calendari) */
.es-ter-sala-legend {
    margin: 0.45rem 0 0;
    text-align: center;
    font-size: 0.75rem;
    line-height: 1.35;
    color: rgba(47, 47, 47, 0.72);
}

.es-ter-sala-legend__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.es-ter-sala-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
}

.es-ter-sala-legend__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.es-ter-sala-legend__dot--karma {
    background: #3A595B;
}

.es-ter-sala-legend__dot--sacra {
    background: #A0522D;
}

.es-ter-sala-legend__dot--shanti {
    background: #4A6FA5;
}

.es-ter-sala-legend__dot--ananda {
    background: #6B3A6B;
}

/* Mòbil: pestanyes del dashboard no sticky mentre el calendari de sessions és actiu */
body.es-ter-cal-actiu #es-db-nav {
    position: relative !important;
    top: auto !important;
    z-index: 4;
    padding-top: 0.45rem !important;
    padding-bottom: 0.35rem !important;
    background: linear-gradient(180deg, #f0ece6 0%, rgba(240, 236, 230, 0.98) 100%);
}

/* Portal: sense FAB "Prova una classe" (reforç si el HTML del footer es servís en caché antiga) */
body.es-db-dashboard-page .floating-trial-btn,
body.es-onboarding-actiu .floating-trial-btn,
body.page-template-page-area-privada .floating-trial-btn,
body.es-db-dietes-page .floating-trial-btn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

@media (max-width: 767px) {
    /* Contenidor amb alçada fixa: evita que height:auto del FC creixi i envaeixi les targetes de sota */
    #es-ter-properes-view-cal {
        display: flex;
        flex-direction: column;
        min-height: 0;
        max-height: min(68vh, 520px);
        overflow: hidden;
    }

    .es-ter-properes-calendar {
        flex: 1 1 auto;
        min-height: 260px;
        height: 100%;
        max-height: 100%;
        overflow: hidden;
    }

    .es-ter-properes-calendar .fc-toolbar.fc-header-toolbar,
    .es-ter-properes-calendar .fc-header-toolbar {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.35rem;
        margin-bottom: 0.35rem;
        padding: 0 0.1rem;
    }

    .es-ter-properes-calendar .fc-toolbar-chunk {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.25rem;
    }

    .es-ter-properes-calendar .fc-toolbar-chunk:first-child {
        flex: 0 0 auto;
        justify-content: flex-start;
    }

    .es-ter-properes-calendar .fc-toolbar-chunk:nth-child(2) {
        flex: 1 1 auto;
        justify-content: center;
        min-width: 0;
    }

    .es-ter-properes-calendar .fc-toolbar-chunk:last-child {
        flex: 0 0 auto;
        justify-content: flex-end;
    }

    .es-ter-properes-calendar .fc-toolbar-title {
        font-size: 0.72rem;
        line-height: 1.2;
        font-weight: 600;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        padding: 0 2px;
    }

    .es-ter-properes-calendar .fc-button {
        font-size: 0.7rem;
        padding: 6px 10px;
        min-height: 36px;
        box-sizing: border-box;
    }

    .es-ter-properes-calendar .fc-prev-button,
    .es-ter-properes-calendar .fc-next-button {
        min-width: 36px;
        padding-left: 8px;
        padding-right: 8px;
    }

    /* Llegenda 2×2 al mòbil (4 sales equilibrades) */
    .es-ter-sala-legend__list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.35rem 0.65rem;
        max-width: 18rem;
        margin-left: auto;
        margin-right: auto;
        justify-items: center;
    }

    .es-ter-sala-legend__item {
        justify-content: center;
        width: auto;
    }

    .es-ter-properes-calendar .fc .fc-scroller-harness {
        min-height: 0;
    }

    .es-ter-properes-calendar .fc .fc-scroller-liquid-absolute {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* Calendari terapeuta: més alçada útil en landscape mòbil (pestanyes ja no sticky) */
@media (orientation: landscape) and (max-height: 560px) {
    body.es-ter-cal-actiu .es-ter-properes-calendar {
        height: calc(100vh - 112px);
        height: calc(100dvh - 112px);
        min-height: 200px;
        max-height: none;
    }
}