/* Peneira — formal, minimal visual system */
:root {
    --primary: #12584d;
    --primary-dark: #0c3d36;
    --primary-light: #1c7a6b;
    --primary-soft: #e8f2ef;
    --secondary: #708295;
    --accent: #00c8a6;
    --accent-dark: #00a88e;
    --accent-light: #e6faf6;
    --peneira-cyan: #5aa5ba;
    --peneira-light-cyan: #e6faf6;
    --brand: #12584d;
    --brand-dark: #0c3d36;
    --brand-light: #1c7a6b;
    --brand-soft: #e8f2ef;
    --brand-tint: #f2f8f6;
    --dark: #0d333c;
    --light: #f5f6f7;
    --surface: #ffffff;
    --surface-1: #f8f9fa;
    --surface-2: #f1f3f5;
    --surface-3: #e9edf0;
    --surface-4: #e3e7ea;
    --border: #dce1e5;
    --border-strong: #c8d0d6;
    --border-soft: #e6eaed;
    --text: #0d333c;
    --text-soft: #2a4540;
    --text-muted: #5f6b72;
    --text-subtle: #727d83;
    --text-on-color: #ffffff;
    --danger: #a84646;
    --danger-dark: #863737;
    --danger-bg: #fbf1f1;
    --danger-text: #7b3030;
    --success: #486f5a;
    --success-bg: #eef5f0;
    --success-text: #355744;
    --warning: #9a7638;
    --warning-bg: #faf5ea;
    --warning-text: #6f5429;
    --info: #526f86;
    --info-bg: #edf3f7;
    --primary-color: var(--primary);
    --secondary-color: var(--secondary);
    --accent-color: var(--accent);
    --bg-color: var(--light);
    --card-bg: var(--surface);
    --text-color: var(--text);
    --border-color: var(--border);
    --hover-color: var(--surface-2);
    --shadow: var(--shadow-md);
    --shadow-xl: 0 18px 48px rgba(23, 36, 50, .18);
}

/* Solicitudes de acceso a proxectos de comunidade */
body#community .community-hero-join-btn-pending {
    cursor: default;
    background: #edf4f2;
    border-color: #c9ddd8;
    color: #42635d !important;
    box-shadow: none;
}

body#community .community-membership-pending-banner {
    border-color: #a7d8cf;
    background: #edf9f6;
}

body#project .project-pending-review-alert.project-pending-member-alert,
body#project .project-pending-review-alert.project-pending-member-alert:hover {
    background: linear-gradient(135deg, #12584d, #0c7666);
    border-color: #12584d;
    color: #fff !important;
}

body#project .project-pending-member-alert .project-pending-review-icon {
    background: rgba(255, 255, 255, .18);
}

.pending-member-list {
    display: grid;
    gap: 10px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.pending-member-item {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid #dce7e4;
    border-radius: 14px;
    background: #f8fbfa;
}

.pending-member-avatar {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #e2f3ef;
    color: #126a5c;
}

.pending-member-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.pending-member-copy strong,
.pending-member-copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pending-member-copy span,
.pending-member-copy small {
    color: #667873;
}

.pending-member-actions {
    display: flex;
    gap: 8px;
}

.pending-member-actions .button {
    min-height: 42px;
    margin: 0;
}

.dashboard-membership-alert {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 18px;
    padding: 20px;
    border: 1px solid #bcded7;
    border-radius: 18px;
    background: linear-gradient(135deg, #effaf7, #fff);
    box-shadow: 0 8px 24px rgba(18, 88, 77, .08);
}

.dashboard-membership-alert-manager {
    border-left: 5px solid #0c9b83;
}

.dashboard-membership-alert-own {
    border-color: #d8d7bd;
    background: linear-gradient(135deg, #fbfaef, #fff);
}

.dashboard-membership-alert-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: #d9f2ec;
    color: #126a5c;
    font-size: 29px;
}

.dashboard-membership-alert-own .dashboard-membership-alert-icon {
    background: #f1efd4;
    color: #716d32;
}

.dashboard-membership-alert-copy h3 {
    margin: 3px 0 5px;
    color: #123b36;
}

.dashboard-membership-alert-copy p {
    margin: 0;
    color: #60716d;
}

.dashboard-membership-projects {
    display: grid;
    gap: 7px;
    margin-top: 14px;
}

.dashboard-membership-projects a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid #d7e5e1;
    border-radius: 10px;
    background: rgba(255, 255, 255, .82);
    color: #174d45;
    text-decoration: none;
}

.dashboard-membership-projects a:hover {
    border-color: #7bbdaf;
    background: #fff;
}

.dashboard-membership-projects strong,
.dashboard-membership-status {
    padding: 3px 8px;
    border-radius: 999px;
    background: #dff3ee;
    color: #126a5c;
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 680px) {
    .pending-member-item {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 10px;
    }

    .pending-member-avatar {
        width: 42px;
        height: 42px;
    }

    .pending-member-actions {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .pending-member-actions .button {
        width: 100%;
        padding-inline: 10px;
    }

    .dashboard-membership-alert {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 12px;
        padding: 15px;
        border-radius: 14px;
    }

    .dashboard-membership-alert-icon {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        font-size: 24px;
    }
}

/* User management — separate batch import and consistent CSV dialog */
body#userManagement .user-management-csv-entry {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 10px 12px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

body#userManagement .user-management-csv-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: var(--primary);
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 50%;
    font-size: 20px;
}

body#userManagement .user-management-csv-copy {
    min-width: 0;
}

body#userManagement .user-management-csv-copy h3 {
    margin: 0 0 3px;
    color: var(--text);
    font-size: .94rem;
    line-height: 1.25;
}

body#userManagement .user-management-csv-copy p {
    margin: 0;
    color: var(--text-muted);
    font-size: .78rem;
    line-height: 1.4;
}

body#userManagement .user-management-csv-entry #uploadCsvButton {
    grid-column: 1 / -1;
    gap: 8px;
    width: 100%;
    min-height: 40px;
    margin: 2px 0 0 !important;
    color: var(--primary) !important;
    background: var(--surface) !important;
    border: 1px solid var(--border-strong) !important;
}

body#userManagement .user-management-csv-entry #uploadCsvButton:hover {
    background: var(--surface-1) !important;
    border-color: var(--primary) !important;
}

body#userManagement .user-management-csv-entry #uploadCsvButton .material-symbols-outlined {
    font-size: 19px;
}

body#userManagement #csvUploadPopup {
    padding: clamp(12px, 3vw, 40px);
}

body#userManagement #csvUploadPopup #content.csv-upload-dialog {
    position: relative;
    display: flex;
    width: min(720px, 100%);
    max-width: 720px;
    height: auto;
    max-height: min(860px, 92vh);
    flex-direction: column;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: var(--radius-lg) !important;
}

body#userManagement #csvUploadPopup .csv-upload-header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 13px;
    min-height: 88px;
    padding: 20px 70px 20px 26px;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border);
}

body#userManagement #csvUploadPopup .csv-upload-header-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    color: var(--primary);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 50%;
    font-size: 21px;
}

body#userManagement #csvUploadPopup .csv-upload-header > div {
    min-width: 0;
}

body#userManagement #csvUploadPopup .csv-upload-header h2 {
    margin: 0 0 3px;
    color: var(--text) !important;
    font-size: 1.18rem;
    line-height: 1.25;
}

body#userManagement #csvUploadPopup .csv-upload-header p {
    margin: 0;
    color: var(--text-muted);
    font-size: .82rem;
    line-height: 1.35;
}

body#userManagement #csvUploadPopup #content.csv-upload-dialog > .close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 34px;
    height: 34px;
    min-height: 34px;
    margin: 0;
    padding: 0;
    appearance: none;
    background-image: none !important;
    background-color: var(--surface) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 50%;
    z-index: 6;
}

body#userManagement #csvUploadPopup #content.csv-upload-dialog > .close::before,
body#userManagement #csvUploadPopup #content.csv-upload-dialog > .close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 2px;
    background: var(--text-soft);
    border-radius: 2px;
}

body#userManagement #csvUploadPopup #content.csv-upload-dialog > .close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

body#userManagement #csvUploadPopup #content.csv-upload-dialog > .close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

body#userManagement #csvUploadPopup .csv-upload-body {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0;
    overflow-y: auto !important;
    padding: 24px 26px 0;
}

body#userManagement #csvUploadPopup #csvUploadForm-container,
body#userManagement #csvUploadPopup #csvUploadResults {
    width: 100%;
    padding: 0;
}

body#userManagement #csvUploadPopup .csv-upload-guidance {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 12px;
    padding: 14px 16px;
    color: var(--text-muted);
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

body#userManagement #csvUploadPopup .csv-upload-guidance > .material-symbols-outlined {
    color: var(--primary);
    font-size: 21px;
}

body#userManagement #csvUploadPopup .csv-upload-guidance .info,
body#userManagement #csvUploadPopup .csv-example-text {
    margin: 0;
    color: var(--text-muted);
    font-size: .82rem;
    font-style: normal;
    line-height: 1.5;
}

body#userManagement #csvUploadPopup .csv-example-text ul {
    margin: 8px 0 0;
    padding-left: 18px;
}

body#userManagement #csvUploadPopup #csvUploadForm {
    display: flex;
    width: 100%;
    max-width: none;
    flex-direction: column;
    gap: 14px;
    margin: 16px 0 0;
    padding: 0;
}

body#userManagement #csvUploadPopup .csv-upload-file-field {
    display: flex;
    flex-direction: column;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

body#userManagement #csvUploadPopup .csv-upload-file-field > label {
    margin: 0 0 7px;
    color: var(--text);
    font-size: .82rem;
    font-weight: 700;
}

body#userManagement #csvUploadPopup #csvFile {
    width: 100%;
    margin: 0;
    padding: 10px;
    color: var(--text);
    background: var(--surface-1);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
}

body#userManagement #csvUploadPopup #csvFile::file-selector-button {
    margin-right: 10px;
    padding: 7px 10px;
    color: var(--primary);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font: inherit;
    font-weight: 650;
    cursor: pointer;
}

body#userManagement #csvUploadPopup .csv-sample-link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    margin-top: 10px;
    color: var(--primary);
    font-size: .78rem;
    font-weight: 650;
    text-decoration: none;
}

body#userManagement #csvUploadPopup .csv-sample-link .material-symbols-outlined {
    font-size: 18px;
}

body#userManagement #csvUploadPopup .csv-upload-role {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin: 0;
    padding: 14px 16px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

body#userManagement #csvUploadPopup .csv-upload-role > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

body#userManagement #csvUploadPopup .csv-upload-role strong {
    color: var(--text);
    font-size: .84rem;
}

body#userManagement #csvUploadPopup .csv-upload-role > div > span {
    color: var(--text-muted);
    font-size: .76rem;
}

body#userManagement #csvUploadPopup .csv-upload-role .switch_checkbox {
    flex: 0 0 auto;
    margin: 0;
}

body#userManagement #csvUploadPopup .csv-upload-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: 2px -26px 0;
    padding: 16px 26px;
    background: var(--surface-1);
    border-top: 1px solid var(--border);
}

body#userManagement #csvUploadPopup .csv-upload-actions button {
    display: inline-flex;
    width: auto;
    min-width: 120px;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0 !important;
    padding: 9px 14px !important;
}

body#userManagement #csvUploadPopup .csv-upload-actions button .material-symbols-outlined {
    font-size: 18px;
}

body#userManagement #csvUploadPopup #csvUploadResults {
    color: var(--text);
}

body#userManagement #csvUploadPopup #csvUploadResults .results-summary {
    padding: 16px;
    background: var(--success-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

body#userManagement #csvUploadPopup #csvUploadResults .results-summary h3,
body#userManagement #csvUploadPopup #csvUploadResults .results-summary p {
    margin: 0 0 6px;
}

body#userManagement #csvUploadPopup #csvUploadResults .user-details,
body#userManagement #csvUploadPopup #csvUploadResults .error-details {
    margin-top: 16px;
}

body#userManagement #csvUploadPopup #csvUploadResults > .csv-upload-actions {
    margin-top: 20px;
}

@media (max-width: 600px) {
    body#userManagement .user-management-csv-entry {
        margin-top: 16px;
        padding-top: 16px;
    }

    body#userManagement #csvUploadPopup {
        align-items: flex-end;
        padding: 8px 6px;
    }

    body#userManagement #csvUploadPopup #content.csv-upload-dialog {
        width: 100%;
        max-height: calc(100dvh - 16px);
        border-radius: var(--radius-md) !important;
    }

    body#userManagement #csvUploadPopup .csv-upload-header {
        min-height: 78px;
        padding: 16px 58px 16px 16px;
    }

    body#userManagement #csvUploadPopup .csv-upload-header-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    body#userManagement #csvUploadPopup #content.csv-upload-dialog > .close {
        top: 16px;
        right: 14px;
    }

    body#userManagement #csvUploadPopup .csv-upload-body {
        padding: 16px 14px 0;
    }

    body#userManagement #csvUploadPopup .csv-upload-guidance,
    body#userManagement #csvUploadPopup .csv-upload-file-field,
    body#userManagement #csvUploadPopup .csv-upload-role {
        padding: 12px;
    }

    body#userManagement #csvUploadPopup .csv-upload-actions {
        margin-right: -14px;
        margin-left: -14px;
        padding: 12px 14px;
    }

    body#userManagement #csvUploadPopup .csv-upload-actions button {
        min-width: 0;
        flex: 1 1 0;
    }
}

/* Shared observation-created dialog (with and without map). */
.observation-success-popup {
    align-items: center;
    padding: clamp(12px, 3vw, 40px);
}

.observation-success-popup #content.observation-success-dialog {
    position: relative;
    display: flex;
    width: min(520px, 100%);
    max-width: 520px;
    height: auto;
    max-height: 92vh;
    flex-direction: column;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-xl) !important;
}

.observation-success-popup .observation-success-header {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 20px 24px;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border);
}

.observation-success-popup .observation-success-header > .material-symbols-outlined {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    color: var(--success);
    background: var(--success-bg);
    border: 1px solid #cfe0d5;
    border-radius: 50%;
    font-size: 22px;
}

.observation-success-popup .observation-success-header h2 {
    margin: 0 0 2px;
    color: var(--text) !important;
    font-size: 1.08rem;
}

.observation-success-popup .observation-success-header p {
    margin: 0;
    color: var(--text-muted);
    font-size: .8rem;
    line-height: 1.4;
}

.observation-success-popup #content .observation-success-body {
    position: static !important;
    display: flex;
    width: auto;
    height: auto;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    overflow: visible;
    padding: 28px 24px;
    text-align: center;
}

.observation-success-popup .observation-success-mark {
    color: var(--success);
    font-size: 54px;
}

.observation-success-popup .observation-success-body p {
    margin: 0;
    color: var(--text-soft);
    font-size: .9rem;
    line-height: 1.5;
}

.observation-success-popup .observation-success-actions {
    display: flex;
    justify-content: flex-end;
    padding: 14px 24px;
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.observation-success-popup .observation-success-action {
    display: inline-flex;
    width: auto;
    min-width: 112px;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0;
    padding: 8px 15px !important;
    color: #fff !important;
    text-decoration: none;
}

.observation-success-popup .observation-success-action .material-symbols-outlined {
    color: #fff !important;
    font-size: 18px;
}

@media (max-width: 600px) {
    .observation-success-popup {
        padding: 12px;
    }

    .observation-success-popup #content.observation-success-dialog {
        width: 100%;
    }

    .observation-success-popup .observation-success-header,
    .observation-success-popup #content .observation-success-body,
    .observation-success-popup .observation-success-actions {
        padding-right: 18px;
        padding-left: 18px;
    }

    .observation-success-popup .observation-success-action {
        width: 100%;
    }
}

html {
    background: #eef0f2;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    color: var(--text);
    background: var(--light);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.6;
    font-feature-settings: "cv11", "ss01";
    letter-spacing: -.003em;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-4); border-radius: var(--radius-full); border: 2px solid var(--light); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

h1, h2, h3, h4, h5, h6 {
    color: var(--primary-dark);
    font-weight: 680;
    line-height: 1.22;
    letter-spacing: -.022em;
}

h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); }
h2 { font-size: clamp(1.35rem, 3vw, 1.75rem); }
h3 { font-size: 1.08rem; }

a {
    color: var(--primary-light);
    text-underline-offset: 3px;
    transition: color .15s ease;
}

a:hover { color: var(--primary-dark); }

::selection {
    color: #fff;
    background: var(--primary);
}

.material-symbols-outlined {
    font-weight: 300;
    font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
}

.card,
.project,
.topic,
.modelContainer,
.myObservation,
.fieldContainer,
.info-card,
.stat-item {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
}

.project,
.topic,
.modelContainer,
.myObservation {
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.project:hover,
.topic:hover,
.modelContainer:hover,
.myObservation:hover {
    border-color: var(--border-strong) !important;
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-2px);
}

body section.header,
header:not(.header):not(.community-header) {
    color: var(--text);
    background: rgba(255, 255, 255, .82) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: 0 1px 0 rgba(22, 32, 41, .03) !important;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
}

body section.header .title,
header .title,
header h1,
header h2,
header h3 {
    color: var(--primary-dark) !important;
}

header .material-symbols-outlined,
body section.header .material-symbols-outlined {
    color: var(--primary) !important;
    transition: color .15s ease, background .15s ease;
}

header .material-symbols-outlined:hover {
    color: var(--primary-dark) !important;
}

/* Por defecto (móbil) as accións do header amosan só a icona; o texto
   revélase en escritorio cunha regra de maior especificidade. */
.header-action .label {
    display: none;
}

main > .content,
main .content {
    width: 100%;
}

footer,
footer.fixed,
footer.chat {
    color: var(--text-soft);
    background: rgba(255, 255, 255, .86) !important;
    border-top: 1px solid var(--border) !important;
    box-shadow: 0 -1px 0 rgba(22, 32, 41, .03) !important;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
}

footer .material-symbols-outlined,
footer .icon-leyend {
    color: var(--primary) !important;
}

footer.fixed .fab span,
.fab .material-symbols-outlined {
    color: #fff !important;
    background: var(--primary) !important;
    border: 5px solid var(--light) !important;
    box-shadow: var(--shadow-md) !important;
}

button:not(.toastui-editor-toolbar-icons),
.button,
input[type="button"],
input[type="submit"],
.nextFieldButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 11px 20px;
    color: #fff;
    background: var(--primary) !important;
    border: 1px solid var(--primary) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: none !important;
    font: inherit;
    font-weight: 600;
    letter-spacing: .005em;
    text-transform: none !important;
    transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.button .material-symbols-outlined,
button.button .material-symbols-outlined {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15em;
    height: 1.15em;
    font-size: 20px;
    line-height: 1;
    flex: 0 0 auto;
}

button:not(.toastui-editor-toolbar-icons):hover,
.button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.nextFieldButton:hover {
    background: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    box-shadow: var(--shadow-sm) !important;
}

button:not(.toastui-editor-toolbar-icons):active,
.button:active { transform: translateY(1px); }

button:focus-visible,
.button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--primary-light);
    outline-offset: 2px;
}

button.secondary,
.button.secondary,
.button.cancel,
button.cancel {
    color: var(--primary) !important;
    background: var(--surface) !important;
    border-color: var(--border-strong) !important;
}

.button.cancel,
button.cancel {
    color: var(--danger) !important;
}

button.warning,
.button.warning,
button.danger,
.button.danger {
    color: #fff !important;
    background: var(--danger) !important;
    border-color: var(--danger) !important;
}

input,
textarea,
select {
    color: var(--text) !important;
    background-color: var(--surface) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: none !important;
    font: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}

input:not([type="checkbox"]):not([type="radio"]),
select {
    min-height: 44px;
    padding: 10px 12px !important;
}

textarea {
    padding: 12px !important;
    line-height: 1.5;
    resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
    outline: none !important;
    border-color: var(--primary-light) !important;
    box-shadow: 0 0 0 3px rgba(63, 86, 107, .15) !important;
}

label {
    color: var(--text-soft) !important;
    font-weight: 600;
    font-size: .87rem;
}

.tip,
.subtitle,
.description,
.details {
    color: var(--text-muted) !important;
}

.popup,
dialog::backdrop {
    background: rgba(18, 27, 35, .52) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.popup #content,
.popup .content,
dialog {
    color: var(--text);
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-xl) !important;
}

.popup .title,
.popup h2,
.popup h3 {
    color: var(--primary-dark) !important;
}

.popup .close,
.popup .closePopup {
    color: var(--primary) !important;
    background-color: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
    transition: background .15s ease, color .15s ease;
}

.popup .close:hover,
.popup .closePopup:hover {
    color: var(--primary-dark) !important;
    background-color: var(--surface-2) !important;
}

.notice,
.alert,
.global-announcement,
.offlineNotice {
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
    text-transform: none !important;
}

.alert.info,
.global-announcement.info { color: var(--info); background: var(--info-bg) !important; border-color: #cfdce5 !important; }
.alert.warning,
.global-announcement.warning { color: var(--warning-text); background: var(--warning-bg) !important; border-color: #e7d7b9 !important; }
.alert.error,
.global-announcement.error { color: var(--danger-text); background: var(--danger-bg) !important; border-color: #e8caca !important; }
.alert.success,
.global-announcement.success { color: var(--success-text); background: var(--success-bg) !important; border-color: #cfe0d5 !important; }

/* Anuncio principal da app: mesma linguaxe visual que o estado de Saúde do admin. */
body#user .global-announcement {
    --announcement-accent: #287c9e;
    --announcement-color: #216784;
    --announcement-soft: #e9f4f8;
    --announcement-border: #c8dfe8;
    position: relative;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 34px;
    width: 100%;
    margin: 0 0 16px;
    padding: 15px 17px;
    box-sizing: border-box;
    align-items: center;
    gap: 12px;
    color: var(--announcement-color) !important;
    background: var(--announcement-soft) !important;
    border: 1px solid var(--announcement-border) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}

body#user .global-announcement.warning {
    --announcement-accent: #a36b14;
    --announcement-color: #815410;
    --announcement-soft: #fff6df;
    --announcement-border: #ead7ad;
}

body#user .global-announcement.error {
    --announcement-accent: #a63d45;
    --announcement-color: #923840;
    --announcement-soft: #fff0f1;
    --announcement-border: #e8c8cc;
}

body#user .global-announcement.success {
    --announcement-accent: #23744f;
    --announcement-color: #176445;
    --announcement-soft: #e8f5ee;
    --announcement-border: #c7e3d4;
}

body#user .global-announcement-icon {
    display: grid;
    width: 46px;
    height: 46px;
    margin: 0;
    padding: 0;
    place-items: center;
    color: #fff;
    background: var(--announcement-accent);
    border-radius: 13px;
    font-size: 24px;
}

body#user .global-announcement-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

body#user .global-announcement-copy strong {
    color: var(--announcement-color);
    font-size: .92rem;
    line-height: 1.3;
}

body#user .global-announcement-message {
    color: var(--announcement-color);
    font-size: .82rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

body#user .global-announcement-message > :first-child {
    margin-top: 0;
}

body#user .global-announcement-message > :last-child {
    margin-bottom: 0;
}

body#user .global-announcement-message p,
body#user .global-announcement-message blockquote,
body#user .global-announcement-message ul,
body#user .global-announcement-message ol {
    margin: 0 0 6px;
}

body#user .global-announcement-message ul,
body#user .global-announcement-message ol {
    padding-left: 20px;
}

body#user .global-announcement-message blockquote {
    padding-left: 10px;
    border-left: 3px solid var(--announcement-accent);
}

body#user .global-announcement-message a {
    color: var(--announcement-accent);
    font-weight: 750;
    text-decoration: underline;
    text-underline-offset: 2px;
}

body#user .global-announcement-message a:hover,
body#user .global-announcement-message a:focus-visible {
    color: var(--primary-dark);
}

body#user button.global-announcement-close {
    display: grid !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center;
    align-self: start;
    color: var(--announcement-color) !important;
    background: rgba(255, 255, 255, .52) !important;
    border: 1px solid rgba(31, 67, 61, .13) !important;
    border-radius: 9px !important;
    box-shadow: none !important;
}

body#user button.global-announcement-close:hover,
body#user button.global-announcement-close:focus-visible {
    color: var(--announcement-accent) !important;
    background: #fff !important;
    border-color: var(--announcement-accent) !important;
    box-shadow: none !important;
    transform: none !important;
}

body#user .global-announcement-close .material-symbols-outlined {
    font-size: 19px;
}

@media (max-width: 600px) {
    body#user .global-announcement {
        grid-template-columns: 40px minmax(0, 1fr) 32px;
        width: calc(100% - 28px);
        margin: 0 14px 16px;
        gap: 10px;
        padding: 13px;
    }

    body#user .global-announcement-icon {
        width: 40px;
        height: 40px;
        border-radius: 11px;
        font-size: 21px;
    }

    body#user button.global-announcement-close {
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
    }
}

/* ---------------------------------------------------------
   Toast de aviso (#notice_main): tarxeta flotante centrada
   arriba, en vez da barra verde a todo o ancho en maiúsculas.
   --------------------------------------------------------- */
#notice_main.notice {
    position: fixed;
    top: max(16px, env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: min(92vw, 460px);
    margin: 0 !important;
    padding: 13px 18px 13px 15px !important;
    color: var(--text) !important;
    background: var(--surface) !important;
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-md) !important;
    box-shadow: 0 12px 32px rgba(25, 38, 45, .18) !important;
    font-size: .9rem;
    font-weight: 550;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none !important;
    z-index: 10001 !important;
    animation: peneiraNoticeIn .22s ease;
}

#notice_main.notice::before {
    font-family: 'Material Symbols Outlined';
    content: 'info';
    margin-right: 9px;
    font-size: 20px;
    font-weight: 300;
    vertical-align: -4px;
    color: var(--primary);
}

#notice_main.notice.success { border-left-color: #2e7d55; }
#notice_main.notice.success::before { content: 'check_circle'; color: #2e7d55; }
#notice_main.notice.error { border-left-color: #c0392b; }
#notice_main.notice.error::before { content: 'error'; color: #c0392b; }
#notice_main.notice.warning { border-left-color: #d97706; }
#notice_main.notice.warning::before { content: 'warning'; color: #d97706; }

@keyframes peneiraNoticeIn {
    from { opacity: 0; transform: translate(-50%, -10px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

@media (max-width: 560px) {
    #notice_main.notice {
        max-width: calc(100vw - 24px);
    }
}

.material-symbols-outlined {
    font-weight: 300;
}

section.projectPicture,
.topPicture,
.mediaContainer,
.videoContainer,
div.map {
    border-radius: var(--radius-md) !important;
    border-color: var(--border) !important;
    box-shadow: none !important;
}

body#user h2 {
    padding-left: 12px;
    color: var(--primary-dark);
    border-left: 3px solid var(--accent);
}

body#project .projectDescription,
body#topic .topicDescription {
    color: var(--text);
    background: transparent !important;
}

body#login {
    justify-content: center !important;
    padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
    background-color: #edf0f2 !important;
    background-image: url('../img/community_bg.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

body#login #wrapper {
    width: min(100%, 430px) !important;
    height: auto !important;
    margin: auto !important;
    padding: 30px 38px 28px;
    justify-content: center !important;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

body#login .logo {
    margin: 0 0 10px !important;
    text-align: center;
}

body#login .login-logo {
    width: 232px;
    height: 232px;
    margin: -18px auto -10px;
    display: block;
    object-fit: contain;
}

body#login .logo h1 {
    margin: 0 !important;
    color: var(--primary-dark) !important;
    font-size: 2.25rem !important;
    font-weight: 700 !important;
    letter-spacing: .08em;
}

body#login .logo p,
body#login form label,
body#login form .link {
    color: var(--text-muted) !important;
}

body#login #form,
body#login form {
    width: 100% !important;
}

body#login form input {
    margin: 6px 0 15px !important;
}

body#login form button {
    width: 100%;
    margin: 4px 0 14px;
}

body#login form button:hover {
    background: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
}

body#login #loginForm {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    text-align: left;
}

body#login #loginForm label {
    margin-top: 10px;
    font-size: .85rem;
    font-weight: 500;
    text-align: left;
}

body#login #loginForm input {
    width: 100% !important;
    height: 48px;
    padding: 0 14px;
    font-size: 1rem;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease;
    -webkit-appearance: none;
    appearance: none;
}

body#login #loginForm input::placeholder {
    color: var(--text-muted);
    opacity: .7;
}

body#login #loginForm input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(18, 88, 77, .15);
}

body#login #loginForm button {
    width: 100%;
    height: 48px;
    margin: 14px 0 2px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .04em;
}

body#login .link {
    margin: 6px 0;
    text-align: center;
    cursor: pointer;
}

body#login .link.accent {
    color: var(--primary) !important;
    font-weight: 500;
}

body#login .logo {
    text-align: center;
}

body#login .logo p {
    margin-top: 4px !important;
    font-size: .9rem;
    text-transform: none;
    background: none !important;
    color: var(--text-muted) !important;
    padding: 0 !important;
    border-radius: 0 !important;
    width: auto !important;
}

body#login footer {
    position: fixed;
    bottom: max(18px, env(safe-area-inset-bottom));
    right: max(18px, env(safe-area-inset-right));
    left: auto;
    width: auto;
    margin: 0 !important;
    padding: 0;
    background: transparent !important;
    border: 0 !important;
}

body#login footer img { opacity: .72; }

body.error {
    align-items: center !important;
    justify-content: center !important;
    padding: 24px;
    color: var(--text);
    background-color: var(--light) !important;
    background-image: none !important;
}

body.error .main {
    width: min(100%, 440px);
    margin: 0 !important;
    padding: 44px 36px !important;
    color: var(--text) !important;
    background: rgba(255,255,255,.92) !important;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

body.error .main h1 { margin-top: 0; }
body.error .main button { margin-top: 24px; }

/* Administration and support */
body.admin {
    color: var(--text) !important;
    background: var(--light) !important;
}

body.admin section.sidebar {
    background: var(--primary-dark) !important;
    border-right: 1px solid rgba(255,255,255,.08);
    box-shadow: none !important;
}

body.admin ul#icons li a {
    color: #dce4ea !important;
    border-radius: var(--radius-sm) !important;
}

body.admin ul#icons li a:hover {
    color: #fff !important;
    background: rgba(255,255,255,.1) !important;
    transform: none !important;
}

body.admin section.main {
    padding: 20px 28px;
    background: var(--light) !important;
}

body.admin .admin-mobile-topbar,
body.admin .tab-navigation,
body.admin .tab-content {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    box-shadow: none !important;
}

body.admin .tab-navigation {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
}

body.admin .tab-btn {
    color: var(--text-muted) !important;
    background: transparent !important;
    border: 0 !important;
}

body.admin .tab-btn.active {
    color: var(--primary-dark) !important;
}

body.admin table,
body.admin ul.table,
body.admin .table-container,
body.admin .chart-container {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
}

body.admin th,
body.admin ul#headers li,
body.admin .table-header {
    color: var(--text-soft) !important;
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
}

body.admin td,
body.admin .table-row,
body.admin [id$="PanelTable"] li {
    border-color: var(--border-soft) !important;
}

body.admin .popup .content > div:first-child {
    background: var(--surface) !important;
    border-bottom-color: var(--border) !important;
}

body.admin .status-badge,
body.admin .priority-badge {
    border-radius: var(--radius-full) !important;
    box-shadow: none !important;
}

/* Landing page */
body > .header {
    padding: 14px 0 !important;
    background: rgba(255,255,255,.96) !important;
    border-bottom: 1px solid var(--border) !important;
}

body > .header .logo { color: var(--primary-dark) !important; letter-spacing: .06em; }
body > .header .nav-links a { color: var(--text-muted) !important; }

body > main.hero {
    min-height: calc(100vh - 73px);
    padding: clamp(56px, 9vw, 112px) 0 !important;
    background: var(--light) !important;
}

.hero-content { gap: clamp(40px, 7vw, 90px) !important; }
.hero-text h1 { color: var(--primary-dark) !important; font-size: clamp(2.6rem, 6vw, 4.8rem) !important; font-weight: 650 !important; letter-spacing: -.045em; }
.hero-text p { color: var(--text-muted) !important; }
.hero .btn-primary { color: #fff !important; background: var(--primary) !important; border: 1px solid var(--primary) !important; box-shadow: var(--shadow-md) !important; }
.hero .btn-primary:hover { background: var(--primary-dark) !important; border-color: var(--primary-dark) !important; box-shadow: var(--shadow-lg) !important; }
.hero .btn-secondary { color: var(--primary) !important; }
.phone-mockup { padding: 10px !important; background: var(--primary-dark) !important; border: 1px solid #0f1a24; border-radius: 30px !important; box-shadow: var(--shadow-xl) !important; }
.phone-screen { background: var(--surface) !important; border-radius: 21px !important; }
.app-header { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important; }

@media (min-width: 1025px) {
    body:not(.admin):not(#login):not(#landing):not(#community) {
        max-width: 960px;
        box-shadow: 0 0 0 1px rgba(22,32,41,.04);
    }

    body#login,
    body#landing,
    body#community {
        width: 100%;
        max-width: none !important;
        box-shadow: none;
    }
}

@media (max-width: 767px) {
    body#login {
        align-items: center !important;
        justify-content: center !important;
        padding:
            max(env(safe-area-inset-top), 16px)
            16px
            calc(72px + env(safe-area-inset-bottom));
        min-height: 100vh;
    }

    body#login #wrapper {
        width: 100% !important;
        max-width: 420px;
        padding: 28px 22px 24px;
        box-shadow: none;
    }

    body#login .logo {
        margin: 0 0 20px !important;
    }

    body#login .login-logo {
        width: 150px;
        height: 150px;
        margin: -8px auto -4px;
    }

    body#login .logo h1 {
        font-size: 1.85rem !important;
        letter-spacing: .1em;
    }

    body#login .logo p {
        font-size: .8rem;
    }

    body#login #loginForm input,
    body#login #loginForm button {
        height: 46px;
    }

    body#login footer {
        bottom: max(12px, env(safe-area-inset-bottom));
    }

    body#login footer img {
        height: 28px !important;
        opacity: .55;
    }

    .hero-content {
        flex-direction: column !important;
        text-align: left !important;
    }

    .hero-text { max-width: none !important; }
    .hero-text h1 { font-size: 2.65rem !important; }
    .hero-buttons { align-items: flex-start !important; flex-direction: column; }
    .nav-links { gap: 14px !important; }
    .nav-links a:not(.btn) { display: none; }
    .phone-mockup { width: min(280px, 82vw) !important; height: 560px !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* =========================================================
   Responsive application shell
   Desktop: full-width workspace, rail navigation and grids.
   Mobile: compact app bar, single flow and bottom actions.
   ========================================================= */

body:not(#login):not(#landing):not(.error):not(.admin):not(#community) {
    width: 100%;
    max-width: none !important;
    margin: 0;
    box-shadow: none !important;
}

body:not(#login):not(#landing):not(.error):not(.admin) > #content {
    width: 100%;
    max-width: none;
    min-height: 100dvh;
}

body:not(.admin):not(#community) main {
    min-width: 0;
}

body:not(.admin):not(#community) main > .content {
    width: min(100%, 1480px);
    max-width: none !important;
    margin-inline: auto;
    padding: clamp(20px, 3vw, 48px) !important;
}

body:not(.admin):not(#community) header > .tools {
    width: 100%;
    max-width: 1480px;
    height: 100%;
    margin-inline: auto;
    padding-inline: clamp(18px, 3vw, 48px);
}

body:not(.admin):not(#community) header > .tools > span:not(.material-symbols-outlined) {
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -.01em;
}

#projectsList,
#projectTopics #topicsContainer,
#newTopicModels,
#userObservations #initialObservations,
#userObservations #allObservations {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    align-items: stretch;
    gap: 18px !important;
}

#projectsList .project,
#projectTopics #topicsContainer .topic,
#newTopicModels .modelContainer,
#userObservations .myObservation {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
}

#projectsList .project {
    display: grid;
    grid-template-rows: 170px auto auto;
    overflow: hidden;
}

#projectsList .project .picture {
    width: 100% !important;
    height: 170px !important;
    border-radius: 0 !important;
}

#projectsList .project .title {
    padding: 18px 18px 8px !important;
    font-size: 1.05rem;
    font-weight: 650;
}

#projectsList .project .details {
    align-self: end;
    padding: 10px 18px 18px !important;
}

#projectTopics #topicsContainer .topic {
    min-height: 138px;
    overflow: hidden;
}

body#topic #listOfFields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

body#topic #listOfFields li {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

body#topic #listOfFields img.field {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

body#topic #listOfFields .fieldName,
body#topic #listOfFields .fieldType {
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    overflow: hidden;
    white-space: normal;
    text-align: left;
    text-overflow: ellipsis;
}

body#topic #listOfFields .fieldName { font-size: .92rem; font-weight: 600; }
body#topic #listOfFields .fieldType { color: var(--text-muted); font-size: .72rem; text-align: right; }

body#topic .mapContainer,
body#topic .userRanking {
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

body#topic .userRanking { padding: 18px; }

body#newProject main .content,
body#newTopic main .content,
body#feedback main .content,
body#newTopic #newTopicBody,
body#newProject #newProjectBody {
    width: min(100%, 980px) !important;
    max-width: none !important;
    margin-inline: auto !important;
}

/* Os fluxos de creación (newProject/newTopic) aproveitan o mesmo ancho
   ca as outras páxinas de dous columnas (project/user) en desktop.
   Hai que ensanchar tamén o wrapper #newTopicBody/#newProjectBody: se non,
   limita a 980px e o .content interior nunca pasa deses 980px. */
body#newTopic #newTopicBody,
body#newProject #newProjectBody,
body#newProject main .content.project-editor.is-creation-flow,
body#newTopic main .content.topic-editor.is-creation-flow {
    width: min(100%, 1760px) !important;
}

body#newProject form,
body#newTopic form,
body#feedback form,
body#observation form {
    padding: clamp(20px, 3vw, 36px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

body#newProject .mediaContainer,
body#newTopic .mediaContainer {
    min-height: 260px;
}

@media (min-width: 960px) {
    body:not(#login):not(#landing):not(.error):not(.admin):not(#community) {
        position: static !important;
        min-height: 100dvh;
        overflow: hidden !important;
    }

    body#user,
    body#newTopic,
    body#project,
    body#topic,
    body#editProject,
    body#observation {
        max-width: none !important;
        margin: 0 !important;
    }

    body:not(.admin):not(#community) > #content,
    body:not(.admin) > section#content {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 72px minmax(0, 1fr) auto;
        height: 100dvh !important;
        min-height: 0;
        overflow: hidden;
    }

    body:not(.admin):not(#community) > #content > header,
    body:not(.admin):not(#community) > section#content > header {
        grid-column: 1;
        grid-row: 1;
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        max-width: none !important;
        height: 72px !important;
        z-index: 40;
    }

    body:not(.admin):not(#community) > #content > main,
    body:not(.admin):not(#community) > section#content > main {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        height: auto !important;
        min-height: 0;
        overflow: auto;
        overscroll-behavior: contain;
    }

    body:not(.admin):not(#community) > #content > footer:not(.fixed),
    body:not(.admin):not(#community) > section#content > footer:not(.fixed) {
        grid-column: 1;
        grid-row: 3;
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 64px;
    }

    /* Dashboard — wide workspace like editProject/editTopic. */
    body#user > #content,
    body#user > section#content {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: 56px minmax(0, 1fr) auto !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding-left: 0;
        height: 100dvh !important;
        overflow: hidden !important;
    }

    body#user > #content > header,
    body#user > section#content > header {
        grid-column: 1 !important;
        grid-row: 1 !important;
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        max-width: none !important;
        height: 56px !important;
        z-index: 40;
    }

    body#user > #content > main,
    body#user > section#content > main {
        grid-column: 1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0;
        overflow: auto;
        margin-left: 0;
        max-width: 100%;
    }

    body#user main > .content {
        width: min(100%, 1760px) !important;
        max-width: none !important;
        margin-inline: auto !important;
        padding: clamp(20px, 3vw, 48px) !important;
    }

    /* Escritorio: o footer fica oculto, o menú está no header */
    body#user > #content > footer.fixed,
    body#user > section#content > footer.fixed {
        display: none !important;
    }

    body#user .content.topic-editor {
        display: grid !important;
        grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
        align-items: start;
        gap: clamp(20px, 2.2vw, 36px);
        width: min(100%, 1760px) !important;
        max-width: 100vw !important;
        padding: clamp(20px, 2.5vw, 40px) !important;
        box-sizing: border-box !important;
        margin-inline: auto !important;
    }

    body#user .topic-form-card {
        position: sticky;
        top: 24px;
    }

    body#user .topic-fields-section {
        display: flex;
        flex-direction: column;
        gap: 20px;
        min-width: 0;
    }

    body#user .project-settings-block {
        padding: 24px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
    }

    body#user .project-settings-block .topic-fields-header {
        margin-bottom: 18px;
        padding-bottom: 14px;
        border-bottom: 1px solid var(--border);
    }

    body#user header .tools .right {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    /* Escritorio: accións do header como pílulas con icona + texto */
    body#user header .tools .header-action {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 36px;
        width: auto;
        padding: 0 12px;
        color: var(--primary-dark) !important;
        background: transparent;
        border-radius: 999px;
        cursor: pointer;
        text-decoration: none;
        transition: background .15s ease, color .15s ease;
    }

    body#user header .tools .header-action:hover {
        color: var(--primary) !important;
        background: var(--primary-soft, rgba(18, 88, 77, .08));
    }

    body#user header .tools .header-action .icon {
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        font-size: 20px !important;
        color: inherit !important;
        background: transparent !important;
        border-radius: 0 !important;
    }

    body#user header .tools .header-action .label {
        display: inline;
        font-size: .86rem;
        font-weight: 600;
        letter-spacing: -.01em;
        white-space: nowrap;
        color: inherit;
    }

    body#user #projectsList {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }

    /* Image and information share the screen on detail pages. */
    body#project main.detail-layout,
    body#topic main.detail-layout {
        display: grid;
        grid-template-columns: minmax(340px, 38vw) minmax(0, 1fr);
        align-items: stretch;
        overflow: hidden !important;
    }

    body#project main.detail-layout > .detail-media,
    body#topic main.detail-layout > .detail-media {
        position: sticky;
        top: 0;
        width: 100%;
        height: 100% !important;
        min-height: 0;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
    }

    body#project main.detail-layout > .content,
    body#topic main.detail-layout > .content {
        width: 100%;
        max-width: none !important;
        height: 100%;
        overflow: auto;
        padding: clamp(30px, 4vw, 64px) !important;
    }

    body#project #topicsContainer {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }

    body#topic #observationsMap { min-height: 360px; }

    body#topic .userRanking {
        flex: 0 0 auto;
    }

    body.admin section.main {
        padding: 28px clamp(28px, 4vw, 64px) !important;
    }
}

@media (max-width: 959px) {
    html, body {
        width: 100%;
        height: 100% !important;
        min-height: 100% !important;
    }

    body:not(#login):not(#landing):not(.error):not(.admin):not(#community) {
        position: fixed !important;
        overflow: hidden !important;
    }

    body:not(.admin):not(#community) > #content,
    body:not(.admin) > section#content {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 60px minmax(0, 1fr) auto;
        height: 100% !important;
        max-height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    body:not(.admin):not(#community) > #content > header,
    body:not(.admin):not(#community) > section#content > header {
        grid-row: 1;
        position: relative !important;
        width: 100% !important;
        height: 60px;
        inset: auto !important;
    }

    body:not(.admin):not(#community):not(#user) > #content > main,
    body:not(.admin):not(#community):not(#user) > section#content > main {
        grid-row: 2 / 4;
        width: 100% !important;
        min-height: 0;
        height: auto !important;
        overflow: auto;
        padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
        scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom));
    }

    /* As barras de acción móbiles non dependen da altura da grella. Chrome
       pode atrasar o segundo layout dun WebAPK ata facer resume; ancorándoas
       ao viewport seguen sempre accesibles desde o primeiro frame. */
    body:not(.admin):not(#community) > #content > footer:not(.fixed),
    body:not(.admin):not(#community) > section#content > footer:not(.fixed) {
        position: fixed !important;
        inset: auto 0 0 0 !important;
        width: 100% !important;
        min-height: 64px;
        z-index: 1200;
    }

    /* Evita que o transform da animación converta #content no bloque de
       referencia do footer fixed durante o arranque da PWA. */
    body:not(.admin):not(#community) > #content.pageIn,
    body:not(.admin):not(#community) > section#content.pageIn {
        animation: none !important;
        transform: none !important;
    }

    body:not(.admin):not(#community) main > .content {
        padding: 18px !important;
    }

    #projectsList,
    #projectTopics #topicsContainer,
    #newTopicModels,
    #userObservations #initialObservations,
    #userObservations #allObservations {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    #projectsList .project {
        grid-template-columns: 112px minmax(0, 1fr);
        grid-template-rows: auto auto;
        min-height: 112px;
    }

    #projectsList .project .picture {
        grid-column: 1;
        grid-row: 1 / 3;
        width: 112px !important;
        height: 100% !important;
        min-height: 112px;
    }

    #projectsList .project .title {
        grid-column: 2;
        grid-row: 1;
        padding: 16px 14px 4px !important;
    }

    #projectsList .project .details {
        grid-column: 2;
        grid-row: 2;
        padding: 4px 14px 14px !important;
    }

    body#user h2 { margin: 26px 0 16px 0; }

    body#user .content.topic-editor {
        display: block !important;
        padding: 18px !important;
    }

    body#user .topic-form-card {
        position: static;
        margin-bottom: 18px;
    }

    body#project main.detail-layout,
    body#topic main.detail-layout {
        display: block;
    }

    body#project main.detail-layout > .detail-media,
    body#topic main.detail-layout > .detail-media {
        width: calc(100% - 36px);
        height: 220px !important;
        margin: 18px 18px 0 !important;
        border-radius: var(--radius-lg) !important;
    }

    body#topic #listOfFields { grid-template-columns: 1fr; }

    body#newProject form,
    body#newTopic form,
    body#feedback form,
    body#observation form {
        padding: 18px;
        border-radius: var(--radius-md);
    }

    footer.fixed .iconGroup {
        align-items: center;
    }

    footer.fixed .footerIcon {
        min-width: 64px;
    }
}

/* =========================================================
   Observation capture wizard
   ========================================================= */

.observation-flow,
.observation-location-flow,
.observation-review-flow {
    min-width: 0;
    background: linear-gradient(180deg, var(--light) 0%, var(--surface-1) 100%);
}

.observation-flow-sidebar,
.observation-location-sidebar,
.observation-review-summary {
    min-width: 0;
    background: var(--surface);
    border-right: 1px solid var(--border);
}

.observation-flow-sidebar {
    display: flex;
    flex-direction: column;
}

.observation-location-prompt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 18px;
    margin: 14px 16px 0;
    padding: 12px 16px !important;
    background-image: none !important;
    border: 1px solid #e7d7b9;
}

.observation-location-prompt > div:first-child {
    flex: 1 1 260px;
    min-width: 0;
}

.observation-location-prompt .buttons {
    margin: 0;
    flex: 0 0 auto;
}

.observation-location-prompt .buttons button {
    min-height: 36px;
    padding: 8px 18px !important;
    border-radius: var(--radius-full) !important;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .03em;
}

.observation-location-prompt button.deny {
    color: var(--danger-text) !important;
    background: transparent !important;
    border: 1px solid var(--danger-text) !important;
    box-shadow: none !important;
}

.observation-location-prompt button.deny:hover {
    background: var(--danger-bg) !important;
}

.observation-kicker {
    display: block;
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.observation-progress-card {
    padding: 24px;
    margin: 0 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.observation-progress-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.observation-progress-heading strong {
    display: block;
    color: var(--primary-dark);
    font-size: 1.15rem;
}

.observation-counter {
    flex: 0 0 auto;
    padding: 5px 9px;
    color: var(--primary);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-size: .78rem;
    font-weight: 700;
}

.observation-progress {
    height: 6px;
    margin: 18px 0 22px;
    overflow: hidden;
    background: var(--surface-3);
    border-radius: var(--radius-full);
}

.observation-progress > span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--primary);
    border-radius: inherit;
    transition: width .24s ease;
}

.observation-field-steps {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
}

.observation-field-steps li {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 5px 8px;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
}

.observation-field-steps li > span:first-child,
.observation-phase-list b {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    color: var(--text-muted);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 50%;
    font-size: .75rem;
    font-style: normal;
}

.observation-field-steps li.is-current {
    color: var(--primary-dark);
    background: var(--surface-2);
    font-weight: 650;
}

.observation-field-steps li.is-current > span:first-child {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
}

.observation-field-steps li.is-complete > span:first-child {
    color: transparent;
    background: var(--success);
    border-color: var(--success);
}

.observation-field-steps li.is-complete > span:first-child::before {
    content: "✓";
    color: #fff;
}

.observation-phase-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.observation-phase-list > span {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: .82rem;
}

.observation-phase-list > span.is-active { color: var(--primary-dark); font-weight: 700; }
.observation-phase-list > span.is-active b { color: #fff; background: var(--primary); border-color: var(--primary); }
.observation-phase-list > span.is-complete b { color: #fff; background: var(--success); border-color: var(--success); font-size: 16px; }

.observation-stage {
    min-width: 0;
    overflow: auto;
    padding: clamp(24px, 5vw, 64px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
}

@media (min-width: 1280px) {
    .observation-stage {
        padding-inline: clamp(40px, 8vw, 120px);
    }
}

body#field .observation-stage .fieldDetails {
    flex-direction: column !important;
    justify-content: flex-start !important;
    width: min(100%, 920px) !important;
    min-height: auto !important;
    margin: 0 auto !important;
    padding: clamp(26px, 4vw, 48px) !important;
    overflow: visible !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-md) !important;
}

body#field .observation-stage .fieldDetails.field-invalid {
    border-color: #d9aaaa !important;
    box-shadow: 0 0 0 3px rgba(168,70,70,.08) !important;
}

body#field .observation-stage .fieldDetails > div:first-of-type h2 {
    margin: 0 0 8px;
    font-size: clamp(1.45rem, 3vw, 2rem);
}

body#field .observation-stage .fieldDetails > div:first-of-type p {
    margin-top: 0;
    color: var(--text-muted);
}

body#field .observation-stage .fieldDetails .field {
    width: 100%;
    margin-top: 24px;
}

body#field .observation-stage .fieldDetails .text,
body#field .observation-stage .fieldDetails .link,
body#field .observation-stage .fieldDetails .select,
body#field .observation-stage .fieldDetails .number {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 8px 0 0 !important;
    padding: 12px 14px !important;
    color: var(--text) !important;
    background: var(--surface) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius-md) !important;
    font-size: 1rem !important;
    text-align: left !important;
}

body#field .observation-stage .fieldDetails textarea.text {
    min-height: 180px;
}

body#field .videoCaptureWrapper,
body#field .mediaContainer,
body#field #audioContainer,
body#field #audioVisualizer {
    width: 100% !important;
    max-width: 760px;
    margin-inline: auto !important;
}

body#field .capture-field-card {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
}

body#field .capture-field-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 17px 18px;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border);
}

body#field .capture-field-heading-icon {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    color: var(--primary);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 50%;
    font-size: 21px;
}

body#field .capture-field-heading > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

body#field .capture-field-heading strong {
    color: var(--text);
    font-size: .92rem;
}

body#field .capture-field-heading div > span {
    color: var(--text-muted);
    font-size: .76rem;
    line-height: 1.35;
}

body#field .capture-field-body {
    padding: 18px;
}

body#field .capture-field-body .videoCaptureWrapper,
body#field .capture-field-body .mediaContainer {
    overflow: hidden;
    border: 1px solid var(--border-strong);
    border-radius: 16px !important;
    box-shadow: none;
}

body#field .capture-field-body .videoCaptureWrapper {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
}

body#field .capture-field-image.has-media-preview .videoCaptureWrapper {
    display: none !important;
}

body#field .popup.auto {
    align-items: center;
    padding: clamp(12px, 3vw, 40px);
}

body#field .popup.auto #content.observation-dialog {
    position: relative;
    display: flex;
    width: min(480px, 100%);
    max-width: 480px;
    height: auto;
    max-height: 92vh;
    flex-direction: column;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-xl) !important;
}

body#field .popup.auto .observation-dialog-header,
body#field #confirmUpload .observation-confirm-header {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 20px 26px;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border);
}

body#field .popup.auto .observation-dialog-header > div,
body#field #confirmUpload .observation-confirm-header > div {
    min-width: 0;
    padding-right: 40px;
}

body#field .popup.auto .observation-dialog-header-icon,
body#field #confirmUpload .observation-confirm-header-icon {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    place-items: center;
    color: var(--primary);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 50%;
    font-size: 22px;
}

body#field .popup.auto .observation-dialog-header .title,
body#field #confirmUpload .observation-confirm-header .title {
    margin: 0 0 2px;
    color: var(--text) !important;
    font-size: 1.08rem;
    font-weight: 700;
    text-align: left !important;
}

body#field .popup.auto .observation-dialog-header p:last-child,
body#field #confirmUpload .observation-confirm-header p:last-child {
    margin: 0;
    color: var(--text-muted);
    font-size: .8rem;
    line-height: 1.4;
}

body#field .popup.auto #content.observation-dialog > .close,
body#field #confirmUpload #content.observation-confirm-dialog > .close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 34px;
    height: 34px;
    min-height: 34px;
    margin: 0;
    padding: 0;
    appearance: none;
    background-image: none !important;
    background-color: var(--surface) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 50%;
    z-index: 6;
}

body#field .popup.auto #content.observation-dialog > .close::before,
body#field .popup.auto #content.observation-dialog > .close::after,
body#field #confirmUpload #content.observation-confirm-dialog > .close::before,
body#field #confirmUpload #content.observation-confirm-dialog > .close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 2px;
    background: var(--text-soft);
    border-radius: 2px;
}

body#field .popup.auto #content.observation-dialog > .close::before,
body#field #confirmUpload #content.observation-confirm-dialog > .close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

body#field .popup.auto #content.observation-dialog > .close::after,
body#field #confirmUpload #content.observation-confirm-dialog > .close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

body#field .popup.auto .observation-dialog-body {
    position: static;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 26px;
    text-align: center;
}

body#field .popup.auto .observation-dialog-mark {
    font-size: 48px;
    color: var(--success);
}

body#field .popup.auto .observation-dialog-spinner {
    width: 56px;
    aspect-ratio: 1;
}

body#field .popup.auto .observation-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 26px 20px;
    border-top: 1px solid var(--border);
}

body#field .popup.auto .observation-dialog-submit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
    text-decoration: none;
}

body#field .popup.auto .observation-dialog-submit .material-symbols-outlined {
    font-size: 18px;
}

body#field #confirmUpload {
    align-items: center;
    padding: clamp(12px, 3vw, 40px);
}

body#field #confirmUpload #content.observation-confirm-dialog {
    position: relative;
    display: flex;
    width: min(640px, 100%);
    max-width: 640px;
    height: auto;
    max-height: min(760px, 92vh);
    flex-direction: column;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-xl) !important;
}

body#field #confirmUpload .observation-confirm-body {
    position: static;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    display: grid;
    gap: 16px;
    overflow-y: auto;
    padding: 24px 26px;
}

body#field #confirmUpload .observation-confirm-summary {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    padding: 16px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

body#field #confirmUpload .observation-confirm-summary .material-symbols-outlined {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: var(--success);
    background: var(--success-bg);
    border-radius: 50%;
}

body#field #confirmUpload .observation-confirm-summary p {
    margin: 0;
    color: var(--text-soft);
    font-size: .88rem;
    line-height: 1.5;
}

body#field #confirmUpload .observation-later-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 15px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

body#field #confirmUpload .observation-later-option > div {
    min-width: 0;
}

body#field #confirmUpload .observation-later-option strong,
body#field #confirmUpload .observation-later-option > div > span {
    display: block;
}

body#field #confirmUpload .observation-later-option strong {
    color: var(--text);
    font-size: .86rem;
}

body#field #confirmUpload .observation-later-option > div > span {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: .76rem;
    line-height: 1.4;
}

body#field #confirmUpload .observation-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding: 14px 26px;
    background: var(--surface);
    border-top: 1px solid var(--border);
}

body#field #confirmUpload .observation-confirm-actions .button {
    display: inline-flex;
    width: auto;
    min-width: 112px;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0;
    padding: 8px 15px !important;
}

body#field #confirmUpload .observation-confirm-cancel {
    color: var(--text-soft) !important;
    background: var(--surface) !important;
    border: 1px solid var(--border-strong) !important;
}

body#field #confirmUpload .observation-confirm-submit {
    color: #fff !important;
    background: var(--primary) !important;
    border: 1px solid var(--primary) !important;
}

body#field #confirmUpload .observation-confirm-submit .material-symbols-outlined {
    font-size: 18px;
}

@media (max-width: 600px) {
    body#field .popup.auto {
        padding: 12px;
    }

    body#field .popup.auto #content.observation-dialog {
        width: 100%;
        max-height: calc(100dvh - 24px);
        border-radius: var(--radius-lg) !important;
    }

    body#field #confirmUpload {
        align-items: center;
        padding: 12px;
    }

    body#field #confirmUpload #content.observation-confirm-dialog {
        width: 100%;
        max-height: calc(100dvh - 24px);
        border-radius: var(--radius-lg) !important;
    }

    body#field #confirmUpload .observation-confirm-header,
    body#field .popup.auto .observation-dialog-header {
        padding: 17px 18px;
    }

    body#field #confirmUpload #content.observation-confirm-dialog > .close {
        top: 17px;
        right: 16px;
    }

    body#field #confirmUpload .observation-confirm-body,
    body#field .popup.auto .observation-dialog-body {
        padding: 18px;
    }

    body#field #confirmUpload .observation-later-option {
        align-items: flex-start;
    }

    body#field #confirmUpload .observation-confirm-actions,
    body#field .popup.auto .observation-dialog-actions {
        padding: 12px 18px;
    }

    body#field #confirmUpload .observation-confirm-actions .button {
        min-width: 0;
        flex: 1 1 0;
    }
}

body#field .capture-field-body .videoCaptureWrapper .buttons {
    position: relative;
    inset: auto;
    width: fit-content;
    max-width: calc(100% - 24px);
    gap: 7px;
    margin: 10px auto 12px;
    padding: 6px 8px;
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(18, 88, 77, .14);
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(12, 61, 54, .16);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
}

body#field .capture-field-body .buttons > .withIcon,
body#field .capture-field-body .buttons > div > label .withIcon,
body#field .capture-field-body .buttons > label .withIcon {
    display: grid;
    width: 46px;
    height: 46px;
    min-width: 46px;
    margin: 0;
    padding: 0;
    place-items: center;
    color: var(--primary-dark);
    background: transparent;
    border: 0;
    border-radius: 10px;
    aspect-ratio: 1;
}

body#field .capture-field-body .buttons > .withIcon:first-child {
    color: #fff;
    background: var(--primary);
}

body#field .capture-field-body .buttons .material-symbols-outlined {
    font-size: 23px;
}

body#field .field[data-type="text"],
body#field .field[data-type="link"],
body#field .field[data-type="number"],
body#field .field[data-type="select"] {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
}

body#field .field[data-type="text"] > label,
body#field .field[data-type="link"] > label,
body#field .field[data-type="number"] > label,
body#field .field[data-type="select"] > label {
    display: block;
    margin: 0 0 8px;
    color: var(--text) !important;
    font-size: .9rem;
    font-weight: 700;
}

@media (max-width: 600px) {
    body#field .capture-field-card {
        border-radius: 16px;
    }

    body#field .capture-field-body {
        padding: 12px;
    }

    body#field .capture-field-body .videoCaptureWrapper .buttons {
        max-width: calc(100% - 16px);
        margin: 8px auto 10px;
    }
}

body#field .videoCapture,
body#field .mediaContainer {
    min-height: clamp(260px, 45vh, 520px) !important;
    max-height: 58vh;
    border-radius: var(--radius-lg) !important;
    background-color: var(--surface-2) !important;
}

/* Camera unavailable — the video collapses and the absolute buttons float
   over the copy above; render the upload control as a proper dropzone. */
body#field .videoCaptureWrapper:has(> .videoCapture.hidden) {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    background: var(--surface-1);
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-lg);
}

body#field .videoCaptureWrapper:has(> .videoCapture.hidden) .buttons {
    position: static;
    padding: 24px;
}

.field-validation {
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(100%, 920px);
    margin: 0 auto 14px;
    padding: 12px 14px;
}

.field-validation[hidden] { display: none !important; }

body#field footer.spaceBetween,
body#add_map footer.right,
body#observation footer.right {
    min-height: 72px;
    padding-inline: clamp(18px, 3vw, 42px);
    align-items: center;
    display: flex;
}

body#field footer.spaceBetween {
    justify-content: space-between;
}

body#add_map footer.right,
body#observation footer.right {
    justify-content: flex-end;
}

body#field footer.spaceBetween .footerContainer,
body#add_map footer.right .footerContainer,
body#observation footer.right .footerContainer {
    min-height: 46px;
    padding: 12px 22px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-transform: none !important;
    font-weight: 600;
    cursor: pointer;
}

body#field footer.spaceBetween .footerContainer span,
body#add_map footer.right .footerContainer span,
body#observation footer.right .footerContainer span {
    margin: 0 !important;
    width: auto !important;
    display: inline-flex;
    align-items: center;
}

body#field footer.spaceBetween .footerContainer .material-symbols-outlined,
body#add_map footer.right .footerContainer .material-symbols-outlined,
body#observation footer.right .footerContainer .material-symbols-outlined {
    font-size: 22px;
    line-height: 1;
}

body#field footer.spaceBetween .footerContainer:last-child .material-symbols-outlined {
    color: #fff !important;
}

body#field footer.spaceBetween .footerContainer:last-child span,
body#add_map footer.right .footerContainer span,
body#observation footer.right .footerContainer span {
    color: #fff !important;
}

body#field footer.spaceBetween .footerContainer:last-child,
body#add_map footer.right .footerContainer,
body#observation footer.right .footerContainer {
    color: #fff;
    background: var(--primary);
    box-shadow: var(--shadow-md);
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

body#field footer.spaceBetween .footerContainer:last-child:hover,
body#add_map footer.right .footerContainer:hover,
body#observation footer.right .footerContainer:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

body#field footer.spaceBetween .footerContainer.is-processing {
    pointer-events: none;
    cursor: wait;
    opacity: .72;
}

.observation-location-sidebar,
.observation-review-summary {
    padding: clamp(24px, 3vw, 42px);
}

.observation-location-sidebar h2,
.observation-review-summary h2 { margin: 0 0 12px; }
.observation-location-sidebar p { color: var(--text-muted); }

.observation-location-stage,
.observation-location-stage > .content,
.observation-location-stage > .content > #addMap,
.observation-location-stage > .content > #noMap,
.observation-location-stage #map {
    width: 100% !important;
    height: 100% !important;
    min-height: 0;
}

.observation-location-stage {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background: var(--surface-2);
    display: flex;
    flex-direction: column;
}

.observation-location-stage > .content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.observation-location-stage > .content > #addMap,
.observation-location-stage > .content > #noMap {
    flex: 1 1 auto;
    position: relative;
}

body#add_map .floatingOnMap.top {
    top: 18px;
    left: 50%;
    width: min(calc(100% - 36px), 520px);
    transform: translateX(-50%);
}

body#add_map #dragMarkerInfo,
body#add_map #locationSearching {
    margin: 0;
    padding: 12px 16px;
    background: rgba(255,255,255,.95) !important;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

body#add_map #locationSearching {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: none;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    box-sizing: border-box;
    transform: none;
}

body#add_map .location-searching-spinner {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    box-sizing: border-box;
    border: 3px solid var(--surface-3);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spinner-zp9dbg .8s linear infinite;
}

body#add_map .location-searching-copy {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    line-height: 1.3;
}

body#add_map .location-searching-copy strong {
    color: var(--text);
    font-size: .88rem;
}

body#add_map .location-searching-copy > span {
    color: var(--text-muted);
    font-size: .75rem;
}

body#add_map .location-searching-manual {
    display: inline-flex;
    min-height: 38px;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 8px 12px;
    color: var(--primary-dark) !important;
    background: #fff !important;
    border: 1px solid var(--primary) !important;
    border-radius: var(--radius-full);
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    transition: color .18s ease, background .18s ease;
}

body#add_map .location-searching-manual:hover,
body#add_map .location-searching-manual:focus-visible {
    color: #fff !important;
    background: var(--primary-dark) !important;
}

body#add_map .location-searching-manual .material-symbols-outlined {
    font-size: 18px;
}

@media (max-width: 600px) {
    body#add_map #locationSearching {
        flex-wrap: wrap;
    }

    body#add_map .location-searching-manual {
        width: 100%;
        justify-content: center;
    }
}

body#add_map #retryLocation {
    right: 22px;
    bottom: 22px;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    color: #fff;
    background: var(--primary);
    border-radius: 50%;
    box-shadow: var(--shadow-md);
    transition: background .18s ease, transform .18s ease;
}

body#add_map #retryLocation:hover {
    background: var(--primary-dark);
    transform: scale(1.05);
}

/* Botón para inserir coordenadas manualmente */
body#add_map .manual-coordinates-btn {
    position: absolute;
    bottom: 22px;
    left: 22px;
    z-index: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    color: #fff;
    background: var(--primary);
    border: 0;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-md);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s ease, transform .18s ease;
}

body#add_map .manual-coordinates-btn .material-symbols-outlined {
    font-size: 18px;
}

body#add_map .manual-coordinates-btn:hover {
    background: var(--primary-dark);
    transform: scale(1.03);
}

/* Todos os popups do mapa por riba dos controis flotantes (barra e capas,
   z-index 1000): senón vense elementos do mapa sobreimpresos no diálogo */
body#add_map .popup {
    z-index: 2000;
}

/* Diálogo de coordenadas manuais — mesmo estilo ca confirmUpload */
body#add_map #manualCoordinatesPanel {
    align-items: center;
    padding: clamp(12px, 3vw, 40px);
}

body#add_map #manualCoordinatesPanel #content.manual-coordinates-dialog {
    position: relative;
    display: flex;
    width: min(480px, 100%);
    max-width: 480px;
    height: auto;
    max-height: 92vh;
    flex-direction: column;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-xl) !important;
}

body#add_map #manualCoordinatesPanel .manual-coordinates-header {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 20px 26px;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border);
}

body#add_map #manualCoordinatesPanel .manual-coordinates-header > div {
    min-width: 0;
    padding-right: 40px;
}

body#add_map #manualCoordinatesPanel .manual-coordinates-header-icon {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    place-items: center;
    color: var(--primary);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 50%;
}

body#add_map #manualCoordinatesPanel .manual-coordinates-header .title {
    margin: 0 0 2px;
    color: var(--text) !important;
    font-size: 1.08rem;
    font-weight: 700;
    text-align: left !important;
}

body#add_map #manualCoordinatesPanel .manual-coordinates-header p:last-child {
    margin: 0;
    color: var(--text-muted);
    font-size: .8rem;
    line-height: 1.4;
}

body#add_map #manualCoordinatesPanel #content.manual-coordinates-dialog > .close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 34px;
    height: 34px;
    min-height: 34px;
    margin: 0;
    padding: 0;
    appearance: none;
    background-image: none !important;
    background-color: var(--surface) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 50%;
    z-index: 6;
}

body#add_map #manualCoordinatesPanel #content.manual-coordinates-dialog > .close::before,
body#add_map #manualCoordinatesPanel #content.manual-coordinates-dialog > .close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 2px;
    background: var(--text-soft);
    border-radius: 2px;
}

body#add_map #manualCoordinatesPanel #content.manual-coordinates-dialog > .close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

body#add_map #manualCoordinatesPanel #content.manual-coordinates-dialog > .close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

body#add_map #manualCoordinatesPanel .manual-coordinates-body {
    /* Neutralizar o patrón legacy de style_pro (.popup #content .body é
       fixed a pantalla completa en móbil): o corpo vive dentro do diálogo */
    position: static;
    top: auto;
    left: auto;
    display: block;
    width: auto;
    height: auto;
    overflow: visible;
    padding: 24px 26px;
}

body#add_map #manualCoordinatesPanel .manual-coordinates-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

body#add_map #manualCoordinatesPanel .manual-coordinates-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

body#add_map #manualCoordinatesPanel .manual-coordinates-field label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-soft);
}

body#add_map #manualCoordinatesPanel .manual-coordinates-field input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: .95rem;
    box-sizing: border-box;
}

body#add_map #manualCoordinatesPanel .manual-coordinates-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 26px 20px;
    border-top: 1px solid var(--border);
}

body#add_map #manualCoordinatesPanel .manual-coordinates-actions .button {
    min-width: 0;
}

body#add_map #manualCoordinatesPanel .manual-coordinates-submit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
}

body#add_map #manualCoordinatesPanel .manual-coordinates-submit .material-symbols-outlined {
    font-size: 18px;
}

/* Overlay de "Creando observación..." — oculto por defecto */
body#add_map #creatingObservation {
    display: none;
}

/* Diálogo xenérico para popups auto (saving/finding/created) — mesmo estilo ca confirmUpload */
body#add_map .popup.auto #content.observation-dialog {
    position: relative;
    display: flex;
    width: min(480px, 100%);
    max-width: 480px;
    height: auto;
    max-height: 92vh;
    flex-direction: column;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-xl) !important;
}

body#field #savingOnline,
body#add_map #savingOnline {
    box-sizing: border-box;
    padding: clamp(12px, 3vw, 40px);
}

@media (max-width: 600px) {
    body#field #savingOnline,
    body#add_map #savingOnline {
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    }

    body#field #savingOnline #content.observation-dialog,
    body#add_map #savingOnline #content.observation-dialog {
        width: 100%;
    }
}

body#add_map .popup.auto .observation-dialog-header {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 20px 26px;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border);
}

body#add_map .popup.auto .observation-dialog-header > div {
    min-width: 0;
    padding-right: 40px;
}

body#add_map .popup.auto .observation-dialog-header-icon {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    place-items: center;
    color: var(--primary);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 50%;
    font-size: 22px;
}

body#add_map .popup.auto .observation-dialog-header .title {
    margin: 0 0 2px;
    color: var(--text) !important;
    font-size: 1.08rem;
    font-weight: 700;
    text-align: left !important;
}

body#add_map .popup.auto .observation-dialog-header p:last-child {
    margin: 0;
    color: var(--text-muted);
    font-size: .8rem;
    line-height: 1.4;
}

body#add_map .popup.auto #content.observation-dialog > .close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 34px;
    height: 34px;
    min-height: 34px;
    margin: 0;
    padding: 0;
    appearance: none;
    background-image: none !important;
    background-color: var(--surface) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 50%;
    z-index: 6;
}

body#add_map .popup.auto #content.observation-dialog > .close::before,
body#add_map .popup.auto #content.observation-dialog > .close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 2px;
    background: var(--text-soft);
    border-radius: 2px;
}

body#add_map .popup.auto #content.observation-dialog > .close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

body#add_map .popup.auto #content.observation-dialog > .close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

body#add_map .popup.auto .observation-dialog-body {
    /* Neutralizar o .body fixed a pantalla completa do style_pro (móbil) */
    position: static;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 26px;
    text-align: center;
}

body#add_map .popup.auto .observation-dialog-mark {
    font-size: 48px;
    color: var(--success);
}

body#add_map .popup.auto .observation-dialog-spinner {
    width: 56px;
    aspect-ratio: 1;
}

body#field .popup.auto .observation-dialog-spinner,
body#add_map .popup.auto .observation-dialog-spinner {
    display: block;
    width: 48px;
    height: 48px;
    box-sizing: border-box;
    background: none;
    border: 4px solid var(--surface-3);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spinner-zp9dbg .8s linear infinite;
}

body#add_map .popup.auto .observation-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 26px 20px;
    border-top: 1px solid var(--border);
}

body#add_map .popup.auto .observation-dialog-submit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
    text-decoration: none;
}

body#add_map .popup.auto .observation-dialog-submit .material-symbols-outlined {
    font-size: 18px;
}

@media (max-width: 959px) {
    body#add_map .popup.auto #content.observation-dialog {
        width: min(420px, 100%);
        max-width: 420px;
    }

    body#add_map .popup.auto .observation-dialog-header {
        padding: 16px 18px;
    }

    body#add_map .popup.auto .observation-dialog-body {
        padding: 18px;
    }

    body#add_map .popup.auto .observation-dialog-actions {
        padding: 12px 18px 16px;
    }
}

@media (max-width: 959px) {
    body#add_map #manualCoordinatesPanel #content.manual-coordinates-dialog {
        width: min(420px, 100%);
        max-width: 420px;
    }

    body#add_map #manualCoordinatesPanel .manual-coordinates-header {
        padding: 16px 18px;
    }

    body#add_map #manualCoordinatesPanel .manual-coordinates-body {
        padding: 18px;
    }

    body#add_map #manualCoordinatesPanel .manual-coordinates-form {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    body#add_map #manualCoordinatesPanel .manual-coordinates-actions {
        padding: 12px 18px 16px;
    }
}

@media (max-width: 959px) {
    /* Baixo o selector de capas de Leaflet (topright) para non solaparse */
    body#add_map .manual-coordinates-btn {
        top: 68px;
        right: 12px;
        bottom: auto;
        left: auto;
        padding: 7px 11px;
        font-size: .78rem;
    }

    body#add_map .manual-coordinates-btn span:last-child {
        display: none;
    }
}

.observation-review-stage {
    min-width: 0;
    overflow: auto;
}

.observation-review-stage .fieldsList {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.observation-review-stage .fieldsList li {
    padding: 16px;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.observation-review-stage .fieldsList img,
.observation-review-stage .fieldsList video,
.observation-review-stage .fieldsList audio {
    width: 100%;
    max-height: 280px;
    margin-top: 12px;
    object-fit: contain;
}

.observation-review-stage #reviewObservationMap {
    width: 100%;
    min-height: 360px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

body#add_map #confirmUpload {
    align-items: center;
    padding: clamp(12px, 3vw, 40px);
}

body#add_map #confirmUpload #content.observation-confirm-dialog {
    position: relative;
    display: flex;
    width: min(640px, 100%);
    max-width: 640px;
    height: auto;
    max-height: min(760px, 92vh);
    flex-direction: column;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-xl) !important;
}

body#add_map #confirmUpload .observation-confirm-header {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 20px 26px;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border);
}

body#add_map #confirmUpload .observation-confirm-header > div {
    min-width: 0;
    padding-right: 40px;
}

body#add_map #confirmUpload .observation-confirm-header-icon {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    place-items: center;
    color: var(--primary);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 50%;
}

body#add_map #confirmUpload .observation-confirm-header .title {
    margin: 0 0 2px;
    color: var(--text) !important;
    font-size: 1.08rem;
    font-weight: 700;
    text-align: left !important;
}

body#add_map #confirmUpload .observation-confirm-header p:last-child {
    overflow: hidden;
    margin: 0;
    color: var(--text-muted);
    font-size: .8rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body#add_map #confirmUpload #content.observation-confirm-dialog > .close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 34px;
    height: 34px;
    min-height: 34px;
    margin: 0;
    padding: 0;
    appearance: none;
    background-image: none !important;
    background-color: var(--surface) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 50%;
    z-index: 6;
}

body#add_map #confirmUpload #content.observation-confirm-dialog > .close::before,
body#add_map #confirmUpload #content.observation-confirm-dialog > .close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 2px;
    background: var(--text-soft);
    border-radius: 2px;
}

body#add_map #confirmUpload #content.observation-confirm-dialog > .close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

body#add_map #confirmUpload #content.observation-confirm-dialog > .close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

body#add_map #confirmUpload .observation-confirm-body {
    /* Neutralizar o .body fixed a pantalla completa do style_pro (móbil) */
    position: static;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    display: grid;
    gap: 16px;
    overflow-y: auto;
    padding: 24px 26px;
}

body#add_map #confirmUpload .observation-confirm-summary {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    padding: 16px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

body#add_map #confirmUpload .observation-confirm-summary .material-symbols-outlined {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: var(--success);
    background: var(--success-bg);
    border-radius: 50%;
}

body#add_map #confirmUpload .observation-confirm-summary p {
    margin: 0;
    color: var(--text-soft);
    font-size: .88rem;
    line-height: 1.5;
}

body#add_map #confirmUpload .observation-later-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 15px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

body#add_map #confirmUpload .observation-later-option > div {
    min-width: 0;
}

body#add_map #confirmUpload .observation-later-option strong,
body#add_map #confirmUpload .observation-later-option > div > span {
    display: block;
}

body#add_map #confirmUpload .observation-later-option strong {
    color: var(--text);
    font-size: .86rem;
}

body#add_map #confirmUpload .observation-later-option > div > span {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: .76rem;
    line-height: 1.4;
}

body#add_map #confirmUpload .observation-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding: 14px 26px;
    background: var(--surface);
    border-top: 1px solid var(--border);
}

body#add_map #confirmUpload .observation-confirm-actions .button {
    display: inline-flex;
    width: auto;
    min-width: 112px;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0;
    padding: 8px 15px !important;
}

body#add_map #confirmUpload .observation-confirm-cancel {
    color: var(--text-soft) !important;
    background: var(--surface) !important;
    border: 1px solid var(--border-strong) !important;
}

body#add_map #confirmUpload .observation-confirm-submit {
    color: #fff !important;
    background: var(--primary) !important;
    border: 1px solid var(--primary) !important;
}

body#add_map #confirmUpload .observation-confirm-submit .material-symbols-outlined {
    font-size: 18px;
}

@media (max-width: 600px) {
    body#add_map #confirmUpload {
        align-items: center;
        padding: 12px;
    }

    body#add_map #confirmUpload #content.observation-confirm-dialog {
        width: 100%;
        max-height: calc(100dvh - 24px);
        border-radius: var(--radius-lg) !important;
    }

    body#add_map #confirmUpload .observation-confirm-header {
        padding: 17px 18px;
    }

    body#add_map #confirmUpload #content.observation-confirm-dialog > .close {
        top: 17px;
        right: 16px;
    }

    body#add_map #confirmUpload .observation-confirm-body {
        padding: 18px;
    }

    body#add_map #confirmUpload .observation-later-option {
        align-items: flex-start;
    }

    body#add_map #confirmUpload .observation-confirm-actions {
        padding: 12px 18px;
    }

    body#add_map #confirmUpload .observation-confirm-actions .button {
        min-width: 0;
        flex: 1 1 0;
    }
}

@media (min-width: 960px) {
    body#field main.observation-flow {
        display: grid;
        grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
        align-items: start;
        gap: clamp(20px, 2.2vw, 36px);
        width: min(100%, 1760px);
        max-width: none;
        margin-inline: auto;
        padding: clamp(20px, 2.5vw, 40px);
        box-sizing: border-box;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        scrollbar-gutter: stable;
    }

    body#field .observation-stage {
        width: 100%;
        min-width: 0;
        padding: 0;
        overflow: visible;
    }

    body#field .observation-stage .fieldDetails {
        width: 100% !important;
        max-width: none !important;
    }

    body#field main.observation-flow > .observation-location-prompt {
        grid-column: 1 / -1;
        align-self: start;
    }

    body#field .observation-flow-sidebar {
        position: sticky;
        top: 0;
        height: auto;
        overflow: visible;
        padding: 0;
        background: transparent;
        border: 0;
    }

    body#field .observation-progress-card {
        width: 100%;
        max-height: 100%;
        margin: 0;
        overflow: auto;
        box-sizing: border-box;
    }

    body#field .videoCaptureWrapper {
        height: clamp(300px, 42vh, 480px);
        overflow: hidden;
        background: #101417;
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-lg);
    }

    body#field .videoCaptureWrapper .videoCapture {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        object-fit: cover;
        border: 0 !important;
        border-radius: inherit !important;
    }

    /* O partial de vídeo contén a cámara e un segundo reprodutor para o
       resultado. Este último debe seguir oculto ata que haxa unha gravación;
       forzar display:block nos dous dividía a cámara e deixaba un panel negro. */
    body#field .videoCaptureWrapper .videoCapture:not(.preview) {
        display: block;
    }

    /* En escritorio, a captura fotográfica resulta máis natural en 4:3.
       Evitamos que o ancho da columna converta o visor nun panel panorámico. */
    body#field .capture-field-image .videoCaptureWrapper {
        width: min(100%, 680px) !important;
        height: auto;
        grid-template-rows: auto auto;
        margin-inline: auto !important;
    }

    body#field .capture-field-image .videoCaptureWrapper .videoCapture:not(.preview) {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 4 / 3 !important;
        object-fit: cover;
    }

    body#observation main.observation-review-flow {
        display: grid;
        grid-template-columns: minmax(270px, 320px) minmax(0, 1fr);
        overflow: hidden !important;
    }

    body#add_map main.observation-location-flow {
        display: grid;
        grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
        overflow: hidden !important;
        align-items: stretch;
        gap: clamp(20px, 2.2vw, 36px);
        width: min(100%, 1760px);
        max-width: none;
        margin-inline: auto;
        padding: clamp(20px, 2.5vw, 40px);
        box-sizing: border-box;
    }

    body#add_map .observation-location-sidebar {
        height: 100%;
        overflow: auto;
        padding: 0;
        background: transparent;
        border: 0;
    }

    body#add_map .observation-location-card {
        width: 100%;
        max-height: 100%;
        margin: 0;
        padding: 24px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        box-sizing: border-box;
    }

    body#add_map .observation-location-stage {
        padding: 0;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-md);
        overflow: hidden;
    }

    body#add_map .observation-location-stage > .content {
        padding: 0;
    }

    .observation-location-sidebar,
    .observation-review-summary {
        height: 100%;
        overflow: auto;
    }

    body#observation .observation-review-stage {
        width: 100%;
        max-width: none !important;
        padding: clamp(28px, 4vw, 58px) !important;
    }
}

@media (max-width: 959px) {
    body#field main.observation-flow,
    body#observation main.observation-review-flow {
        display: block;
        overflow: auto !important;
    }

    /* Mapa: columna con fases arriba e o mapa enchendo o resto exacto */
    body#add_map main.observation-location-flow {
        display: flex;
        flex-direction: column;
        overflow: hidden !important;
    }

    body#add_map .observation-location-sidebar {
        flex: 0 0 auto;
    }

    body#add_map .observation-location-stage {
        flex: 1 1 auto;
        min-height: 0;
        height: auto !important;
    }

    .observation-location-sidebar,
    .observation-review-summary {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    /* Móbil: o sidebar do wizard non é panel, só un bloque máis do fluxo */
    .observation-flow-sidebar {
        background: transparent;
        border: 0;
    }

    .observation-progress-card {
        padding: 14px 16px;
        margin: 16px 16px 0;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
    }
    .observation-progress { margin: 12px 0; }
    .observation-field-steps { display: none; }
    .observation-progress-card .observation-phase-list { display: none; }

    .observation-stage { padding: 16px; }

    body#field .observation-stage .fieldDetails {
        padding: 20px !important;
        border-radius: var(--radius-md) !important;
    }

    body#field .videoCapture,
    body#field .mediaContainer {
        min-height: 260px !important;
        max-height: 48vh;
    }

    .observation-location-sidebar,
    .observation-review-summary {
        padding: 16px 18px;
    }

    body#add_map .observation-location-card {
        padding: 0;
        margin: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    body#add_map .observation-location-stage {
        padding: 0;
        background: var(--surface-2);
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .observation-location-sidebar h2,
    .observation-location-sidebar > p,
    .observation-review-summary > h3 {
        display: none;
    }

    /* O texto do sidebar duplica a barra flotante do mapa: só as fases */
    body#add_map .observation-location-card .observation-kicker,
    body#add_map .observation-location-card h2,
    body#add_map .observation-location-card > p {
        display: none;
    }

    body#add_map .observation-location-sidebar {
        padding: 10px 14px 12px;
    }

    body#add_map .observation-location-card .observation-phase-list {
        margin-top: 0;
    }

    .observation-location-sidebar .observation-phase-list,
    .observation-review-summary .observation-phase-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        margin: 10px 0 0;
        padding: 0;
        border: 0;
    }

    .observation-location-sidebar .observation-phase-list > span,
    .observation-review-summary .observation-phase-list > span {
        grid-template-columns: 24px minmax(0,1fr);
        gap: 5px;
        font-size: .65rem;
    }

    .observation-location-sidebar .observation-phase-list b,
    .observation-review-summary .observation-phase-list b {
        width: 22px;
        height: 22px;
        font-size: .65rem;
    }

    .observation-location-stage {
        height: max(420px, calc(100% - 112px));
        min-height: 420px;
    }

    /* Deixar oco á dereita para o botón de coordenadas manuais */
    body#add_map .floatingOnMap.top {
        top: 12px;
        left: 12px;
        width: calc(100% - 78px);
        transform: none;
    }

    body#add_map #retryLocation {
        right: 14px;
        bottom: 14px;
    }

    body#observation .observation-review-stage {
        padding: 18px !important;
    }

    .observation-review-stage .fieldsList { grid-template-columns: 1fr; }
    .observation-review-stage #reviewObservationMap { min-height: 260px; }
}

/* =========================================================
   Polish v2 — detalles elegantes modernos
   ========================================================= */

/* Avatar/header con sutil gradiente de marca */
body#user #currentUserPicture {
    border: 3px solid rgba(255, 255, 255, .85) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18) !important;
}

/* Project/topic cards: borde de marca ao hover */
.project:hover,
.topic:hover,
.modelContainer:hover,
.myObservation:hover {
    border-color: var(--primary-light) !important;
}

/* Footer FAB con sombra */
footer.fixed .fab span {
    box-shadow: var(--shadow-md) !important;
}

/* Spinner de loading mais refinado */
section#loading .spinner,
.spinner {
    border-width: 3px !important;
    border-color: var(--surface-3) !important;
    border-top-color: var(--primary) !important;
}

/* Kicker badges */
.observation-kicker {
    color: var(--text-muted) !important;
}

.observation-counter {
    color: var(--primary) !important;
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
}

/* Títulos de sección con acento vertical */
body#project h2,
body#topic h2,
body#observations h2,
body#tickets h2 {
    padding-left: 14px;
    border-left: 3px solid var(--accent);
}

/* Cards con sombra interior sutil */
body#project .project,
body#topic .topic,
body#user .myObservation {
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .6) !important;
}

/* Inputs en estado invalid */
.field-invalid input,
.field-invalid textarea,
.field-invalid select,
input.invalid,
textarea.invalid {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 3px rgba(168, 70, 70, .12) !important;
}

/* Transicions suaves globales para elementos interactivos */
a, button, .button, .footerContainer, .withIcon, .icon, .footerIcon,
.tab-button, .nav-links a, .popup .close {
    will-change: transform, background, color;
}

/* Ocultar spin buttons numéricos para mellor estética */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] { -moz-appearance: textfield; }

/* Switch / checkbox toggle modernizado */
.switch_checkbox .slider_checkbox {
    background: var(--surface-3) !important;
    border-radius: var(--radius-full) !important;
    transition: background .2s ease !important;
}
.switch_checkbox input:checked + .slider_checkbox {
    background: var(--primary) !important;
}
.switch_checkbox .slider_checkbox::before {
    box-shadow: 0 2px 6px rgba(22, 32, 41, .2) !important;
}

/* Custom file upload como botón elegante */
.custom-file-upload {
    transition: background .15s ease, border-color .15s ease, transform .15s ease !important;
}
.custom-file-upload:hover {
    transform: translateY(-1px);
}

/* Imaxes redondeadas en cards */
.project .picture img,
.topic img,
.myObservation img {
    border-radius: inherit;
}

/* Hover suave en lista de campos */
body#topic #listOfFields li {
    transition: border-color .15s ease, background .15s ease;
}
body#topic #listOfFields li:hover {
    border-color: var(--primary-light) !important;
    background: var(--surface-1);
}

/* Mapa con borde refinado */
div.map,
#map,
#observationsMap,
#reviewObservationMap {
    box-shadow: var(--shadow-sm) !important;
}

/* Pequena animación de entrada para a aplicación */
.pageIn {
    animation: pageIn .28s ease;
}
@keyframes pageIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

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

/* =========================================================
   Edit location controls (observation.ejs)
   ========================================================= */
.map-edit-controls {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1000;
    display: flex;
    gap: 8px;
}

.map-edit-btn {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: #fff !important;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(22, 32, 41, .22) !important;
    transition: background .15s ease, transform .15s ease;
}

.map-edit-btn:hover { transform: scale(1.06); }

.map-edit-save { background: var(--primary) !important; }
.map-edit-save:hover { background: var(--primary-dark) !important; }

/* =========================================================
   Edit/Create topic — UI moderna
   ========================================================= */
body#newTopic main .content.topic-editor {
    width: min(100%, 920px) !important;
    margin-inline: auto !important;
    padding: clamp(20px, 3vw, 40px) !important;
}

.topic-form-card {
    padding: clamp(22px, 3vw, 36px) !important;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.topic-form-header {
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
}

.topic-form-header h2 {
    margin: 0 0 4px;
    font-size: 1.5rem;
}

.topic-form-subtitle {
    margin: 0;
    color: var(--text-muted);
    font-size: .95rem;
}

.topic-form-grid {
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

@media (max-width: 767px) {
    .topic-form-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

.topic-form-media .custom-file-upload {
    display: block;
    cursor: pointer;
}

.topic-form-media {
    min-width: 0;
    overflow: hidden;
}

.topic-image-preview {
    width: 100% !important;
    height: 160px !important;
    min-height: 160px !important;
    background-size: cover !important;
    background-position: center !important;
    background-color: var(--surface-2);
    border: 2px dashed var(--border-strong) !important;
    border-radius: var(--radius-md) !important;
    transition: border-color .15s ease, background-color .15s ease;
}

.topic-image-preview:hover {
    border-color: var(--primary-light) !important;
    background-color: var(--surface-1);
}

.topic-image-preview.full {
    border-style: solid !important;
    border-color: var(--border) !important;
}

/* Placeholder centrado para subir imaxe (sen recortar) */
.mediaPlaceholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    text-align: center;
    pointer-events: none;
    color: var(--text-muted);
    background: var(--surface-1);
    border-radius: inherit;
}

.mediaPlaceholder-icon {
    font-size: 44px;
    color: var(--primary-light);
    opacity: .85;
}

.mediaPlaceholder-text {
    font-size: .82rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

/* Ocultar o placeholder cando xa hai imaxe (clase 'full') */
.mediaContainer.full .mediaPlaceholder {
    display: none;
}

/* O GIF de carga é un indicador, non unha portada: mantelo centrado e pequeno. */
#mediaContainer.is-loading {
    background-size: 64px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.mediaContainer.is-loading .mediaPlaceholder {
    display: none;
}

body#newProject .mediaContainer,
body#newTopic .mediaContainer {
    position: relative;
}

/* Overlay que indica que a imaxe se pode trocar */
.topic-image-change-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #fff;
    background: rgba(0, 0, 0, .35);
    border-radius: var(--radius-md);
    opacity: .55;
    transition: opacity .15s ease, background .15s ease;
    pointer-events: none;
    font-size: .82rem;
    font-weight: 600;
}

.topic-image-change-overlay .material-symbols-outlined {
    font-size: 28px;
}

.custom-file-upload {
    position: relative;
}

.custom-file-upload:hover .topic-image-change-overlay,
.custom-file-upload:focus-within .topic-image-change-overlay {
    opacity: 1;
    background: rgba(0, 0, 0, .5);
}

.topic-media-hint {
    margin: 8px 0 0;
    text-align: center;
    font-size: .82rem;
    color: var(--text-muted);
    font-weight: 600;
}

/* Imaxe obrigatoria en newProject/newTopic: renderizamos o <input type=file>
   como capa invisible sobre o dropzone para poder amosar a validación NATIVA
   do navegador (reportValidity) igual ca un campo obrigatorio, en vez dun
   notice global feo. Vence a ".hidden { display:none !important }". */
body#newProject .project-form-media .custom-file-upload #mediaFile,
body#newTopic .is-creation-flow .topic-form-media .custom-file-upload #mediaFile {
    display: block !important;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

/* Os botóns de cámara/galería (só móbil) deben quedar por riba da capa. */
body#newProject .mobile-image-buttons,
body#newTopic .mobile-image-buttons {
    z-index: 2;
}

@media (max-width: 959px) {
    .mobile-image-buttons {
        left: 12px;
        right: 12px;
        bottom: 12px;
        display: flex;
        gap: 6px;
        padding: 6px;
        background: rgba(255, 255, 255, .9);
        border: 1px solid rgba(18, 88, 77, .14);
        border-radius: 14px;
        box-shadow: 0 6px 18px rgba(12, 61, 54, .16);
        backdrop-filter: blur(12px) saturate(150%);
        -webkit-backdrop-filter: blur(12px) saturate(150%);
    }

    .mobile-image-buttons > .mobile-image-option {
        display: flex;
        width: 50%;
        min-width: 0;
        min-height: 42px;
        aspect-ratio: auto;
        align-items: center;
        justify-content: center;
        gap: 7px;
        margin: 0;
        padding: 8px 10px;
        color: var(--primary-dark);
        font-size: .72rem;
        font-weight: 650;
        line-height: 1.15;
        text-align: center;
        background: transparent;
        border: 0;
        border-radius: 10px;
        cursor: pointer;
    }

    .mobile-image-buttons > .mobile-image-option + .mobile-image-option {
        border-left: 1px solid var(--border);
        border-radius: 0 10px 10px 0;
    }

    .mobile-image-buttons > .mobile-image-option:active {
        background: var(--primary-soft);
        transform: scale(.98);
    }

    .mobile-image-buttons > .mobile-image-option .material-symbols-outlined {
        flex: 0 0 auto;
        color: var(--primary);
        font-size: 21px;
    }
}

/* En escritorio toda a previsualización xa abre o selector nativo de ficheiros. */
@media (min-width: 960px) {
    .mobile-image-buttons {
        display: none !important;
    }
}

.topic-form-fields label {
    display: block;
    margin-top: 16px;
    margin-bottom: 6px;
    color: var(--text-soft);
    font-weight: 600;
    font-size: .9rem;
}

.topic-form-fields label:first-child {
    margin-top: 0;
}

.topic-form-fields .tip {
    display: block;
    margin-bottom: 8px;
    font-size: .82rem;
    color: var(--text-muted);
}

.topic-form-fields input,
.topic-form-fields textarea {
    width: 100%;
}

/* Sección de campos do tema */
.topic-fields-section {
    margin-top: 32px;
}

/* In modern two-column workspaces both columns share the same top edge. */
.topic-editor > .topic-fields-section {
    align-self: start;
    margin-top: 0;
}

.topic-fields-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.topic-fields-header h3 {
    margin: 0;
    font-size: 1.15rem;
    color: var(--primary-dark);
}

#addNewField {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 20px !important;
    background: var(--surface) !important;
    color: var(--primary) !important;
    border: 1px dashed var(--border-strong) !important;
    border-radius: var(--radius-md) !important;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
    min-height: 40px;
}

#addNewField:hover {
    border-color: var(--primary-light) !important;
    background: var(--surface-1) !important;
    color: var(--primary-dark) !important;
}

#addNewField .material-symbols-outlined {
    font-size: 22px;
}

/* Lista de campos existentes */
body#newTopic #newTopicFields {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body#newTopic #newTopicFields .noFieldsYet {
    text-align: center;
    padding: 28px 18px;
    color: var(--text-muted);
    background: var(--surface-1);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
}

body#newTopic #newTopicFields div.fieldContainer {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 14px !important;
    margin: 0 !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}

body#newTopic #newTopicFields div.fieldContainer:hover {
    border-color: var(--border-strong) !important;
    box-shadow: var(--shadow-md) !important;
}

body#newTopic #newTopicFields div.fieldContainer.drag-over {
    border: 2px dashed var(--primary) !important;
    background: var(--surface-1) !important;
}

body#newTopic #newTopicFields div.fieldContainer.dragging {
    opacity: .5;
}

body#newTopic #newTopicFields .drag-handle {
    cursor: grab;
    color: var(--text-subtle);
    font-size: 1.1rem;
    user-select: none;
    padding: 2px 4px;
    border-radius: var(--radius-sm);
    transition: background .15s ease, color .15s ease;
    flex: 0 0 auto;
}

body#newTopic #newTopicFields .drag-handle:hover {
    color: var(--text-muted);
    background: var(--surface-2);
}

body#newTopic #newTopicFields .drag-handle:active {
    cursor: grabbing;
}

body#newTopic #newTopicFields div.remove {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border-radius: var(--radius-sm) !important;
    background-color: var(--danger-bg) !important;
    background-image: url(/app/img/icon_delete.png) !important;
    background-position: center !important;
    background-size: 18px !important;
    background-repeat: no-repeat !important;
    cursor: pointer;
    transition: background-color .15s ease;
    flex: 0 0 auto;
}

body#newTopic #newTopicFields div.remove:hover {
    background-color: var(--danger) !important;
}

body#newTopic #newTopicFields .edit-field-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    flex: 0 0 auto;
}

body#newTopic #newTopicFields .edit-field-btn .material-symbols-outlined {
    font-size: 20px;
}

body#newTopic #newTopicFields .edit-field-btn:hover {
    background: var(--surface-2);
    color: var(--primary);
}

body#newTopic #newTopicFields div.field {
    flex: 1 1 auto !important;
    padding: 10px 16px !important;
    background-color: var(--surface-1) !important;
    border: 1px solid var(--border) !important;
    margin: 0 !important;
    color: var(--text) !important;
    border-radius: var(--radius-sm) !important;
    background-repeat: no-repeat !important;
    background-size: 26px !important;
    background-position: 98% 50% !important;
    font-weight: 600 !important;
    width: auto !important;
    box-shadow: none !important;
    display: block !important;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .95rem;
}

body#newTopic #newTopicFields span.sort {
    display: none !important;
}

/* Popup addField modernizado */
#addField #content.flextop {
    width: min(100%, 640px);
    max-height: 90vh;
    overflow: auto;
}

#addField .body {
    padding: 28px;
}

#addField .title {
    margin: 0 0 8px;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--primary-dark);
}

#addField form label {
    display: block;
    margin-top: 20px;
    margin-bottom: 6px;
    color: var(--text-soft);
    font-weight: 600;
    font-size: .9rem;
}

#addField form label:first-child {
    margin-top: 0;
}

#addField .tip {
    display: block;
    margin-bottom: 8px;
    font-size: .82rem;
    color: var(--text-muted);
}

#addField input[type="text"],
#addField input[type="number"],
#addField textarea {
    width: 100%;
    margin: 0;
}

#addField .switch_container {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding: 14px 16px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

#addField .switch_container > span {
    font-size: .9rem;
    font-weight: 600;
    color: var(--text-soft);
}

#addField .button {
    margin-top: 24px;
    width: 100%;
}

/* Lista de tipos de campo (fieldType) */
body#newTopic .fieldType {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    list-style: none;
    padding: 0 !important;
    margin: 8px 0 4px !important;
}

body#newTopic .fieldType li {
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border) !important;
    width: auto !important;
    height: 112px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: end !important;
    margin: 0 !important;
    background-color: var(--surface) !important;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
    padding-bottom: 10px;
    position: relative;
}

body#newTopic .fieldType li:hover {
    border-color: var(--border-strong) !important;
    background-color: var(--surface-1) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

body#newTopic .fieldType li.selected {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff;
    box-shadow: var(--shadow-md);
}

body#newTopic .fieldType li.selected span {
    background-color: transparent !important;
    color: #fff !important;
}

body#newTopic .fieldType li span {
    font-size: .8rem;
    font-weight: 600;
    text-align: center;
    text-transform: capitalize;
}

/* Footer do newTopic / editTopic */
body#newTopic footer.right {
    min-height: 72px;
    padding-inline: clamp(18px, 3vw, 42px);
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

body#newTopic footer.right .footerContainer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    color: #fff;
    background: var(--primary);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
    font-weight: 600;
    text-align: center;
    text-transform: none !important;
}

body#newTopic footer.right .footerContainer:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

body#newTopic footer.right .footerContainer .material-symbols-outlined {
    width: auto !important;
    flex: 0 0 auto;
    margin: 0 !important;
    color: #fff !important;
    font-size: 22px;
    line-height: 1;
}

body#newTopic footer.right .footerContainer span {
    margin: 0 !important;
    width: auto !important;
}

body#newTopic footer.right .footerContainer .text {
    text-align: center !important;
}
.map-edit-cancel { background: var(--secondary) !important; }
.map-edit-cancel:hover { background: var(--primary) !important; }

/* Saída voluntaria do proxecto */
.leave-project-link {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 4px 0 18px;
    padding: 8px 12px;
    border: 1px solid var(--danger-dark) !important;
    border-radius: var(--radius-sm);
    background: var(--gradient-danger) !important;
    color: #fff !important;
    font: inherit;
    font-weight: 650;
    line-height: 1.2;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.leave-project-link .material-symbols-outlined { font-size: 18px; }
.leave-project-link:hover {
    border-color: var(--danger);
    background: var(--gradient-danger) !important;
    color: #fff !important;
    transform: translateY(-1px);
}
.leave-project-link:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--danger) 32%, transparent);
    outline-offset: 2px;
}

/* =========================================================
   Category builder — wide workspace and responsive field editor
   ========================================================= */
body#newTopic main {
    overflow-x: hidden;
    max-width: 100vw;
}

body#newTopic main .content.topic-editor {
    display: grid !important;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    align-items: start;
    gap: clamp(20px, 2.2vw, 36px);
    width: min(100%, 1760px) !important;
    max-width: none !important;
    padding: clamp(20px, 2.5vw, 40px) !important;
    box-sizing: border-box !important;
    margin-inline: auto !important;
}

body#newTopic main .content.topic-editor:not(.is-creation-flow) > .topic-fields-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    min-width: 0;
    border-top: 0;
    box-sizing: border-box;
}

body#newTopic .topic-form-card {
    position: sticky;
    top: 24px;
    padding: 0 !important;
    overflow: hidden;
}

body#newTopic .topic-form-header {
    margin: 0;
    padding: 22px 24px 18px;
    background: var(--surface-1);
}

body#newTopic .topic-form-grid {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 24px;
}

body#newTopic .topic-image-preview {
    height: clamp(150px, 18vw, 210px) !important;
}

body#newTopic .topic-form-fields label:first-child {
    margin-top: 0;
}

body#newTopic .topic-fields-section {
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

body#newTopic .topic-fields-header {
    align-items: flex-start;
    margin: 0 0 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.topic-fields-heading {
    min-width: 0;
}

.topic-section-kicker {
    display: block;
    margin-bottom: 5px;
    color: var(--primary);
    font-size: .72rem;
    font-weight: 750;
    letter-spacing: .1em;
    text-transform: uppercase;
}

body#newTopic .topic-fields-heading h3,
body#project .topic-fields-heading h3 {
    margin: 0 0 6px;
    color: var(--text);
    font-size: clamp(1.2rem, 2vw, 1.55rem);
}

.topic-fields-heading p {
    max-width: 560px;
    margin: 0;
    color: var(--text-muted);
    font-size: .87rem;
    line-height: 1.5;
}

.topic-fields-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.topic-field-count {
    display: grid;
    place-items: center;
    min-width: 38px;
    height: 38px;
    padding-inline: 9px;
    color: var(--primary-dark);
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: .86rem;
    font-weight: 750;
}

body#newTopic #addNewField {
    min-height: 42px;
    color: #fff !important;
    background: var(--primary) !important;
    border: 1px solid var(--primary) !important;
    border-radius: var(--radius-sm) !important;
}

body#newTopic #addNewField:hover {
    color: #fff !important;
    background: var(--primary-dark) !important;
}

body#newTopic #newTopicFields {
    gap: 12px;
}

body#newTopic #newTopicFields .topic-fields-empty {
    display: flex;
    min-height: 220px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
}

body#newTopic #newTopicFields .topic-fields-empty .material-symbols-outlined {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    color: var(--primary);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 50%;
}

body#newTopic #newTopicFields div.fieldContainer {
    display: grid !important;
    grid-template-columns: auto 46px minmax(0, 1fr);
    column-gap: 12px !important;
    row-gap: 8px !important;
    min-height: 104px;
    padding: 14px 16px !important;
}

body#newTopic #newTopicFields .drag-handle {
    align-self: center;
    grid-row: 1;
    font-size: 24px;
}

.field-type-icon {
    display: block;
    align-self: center;
    grid-row: 1;
    width: 46px;
    height: 46px;
    background-color: var(--surface-1);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 28px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.field-card-info {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    grid-row: 1;
    gap: 2px;
}

.field-card-info > strong,
.field-card-info > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.field-card-info > strong {
    color: var(--text);
    font-size: .96rem;
}

.field-card-info > span {
    color: var(--text-muted);
    font-size: .82rem;
}

.field-card-badges {
    display: flex;
    gap: 6px;
    margin-top: 0;
}

.field-card-footer {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 2;
    min-height: 36px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 0;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.field-card-badges span {
    padding: 2px 7px;
    color: var(--text-muted);
    background: var(--surface-2);
    border-radius: 999px;
    font-size: .67rem;
    font-weight: 700;
    line-height: 1.4;
    text-transform: capitalize;
}

.field-card-badges span.is-required {
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.field-card-actions {
    display: flex;
    align-items: center;
    gap: 3px;
}

.ble-device-setup {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    margin-top: 14px;
    padding: 15px;
    border: 1px solid #a9d3cb;
    border-radius: var(--radius-md);
    background: #f1faf8;
}

.ble-device-setup-icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    color: #126d62;
    border-radius: 50%;
    background: #dff3ef;
    font-size: 25px;
}

.ble-device-setup p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: .84rem;
    line-height: 1.45;
}

.ble-device-setup .ble-configurator-launch {
    min-width: max-content;
    margin: 0;
    text-decoration: none;
}

@media (max-width: 760px) {
    .ble-device-setup {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .ble-device-setup .ble-configurator-launch {
        grid-column: 1 / -1;
        width: 100%;
    }
}

button.field-card-action {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    min-width: 36px !important;
    color: var(--text-soft) !important;
    background: #fff !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm);
    box-shadow: none !important;
    cursor: pointer;
}

button.field-card-action:hover:not(:disabled) {
    color: var(--primary) !important;
    background: var(--surface-2) !important;
    border-color: var(--primary-light) !important;
}

button.field-card-action:disabled {
    opacity: .28;
    cursor: default;
}

button.field-card-action .material-symbols-outlined {
    font-size: 20px;
}

button.field-card-action.field-delete-action:hover {
    color: var(--danger) !important;
    background: var(--danger-bg) !important;
}

button.field-move-action {
    display: none;
}

/* Field editor dialog */
#addField {
    padding: clamp(12px, 3vw, 40px);
}

#addField #content.field-editor-dialog {
    position: relative;
    display: flex;
    width: min(1080px, 100%);
    max-width: 1080px;
    max-height: min(860px, 92vh);
    flex-direction: column;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-xl);
}

#addField .field-editor-header {
    flex: 0 0 auto;
    padding: 24px 30px 20px;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border);
}

#addField .field-editor-header .title {
    margin: 0 36px 4px 0;
    color: var(--text);
}

#addField .field-editor-subtitle {
    margin: 0;
    color: var(--text-muted);
    font-size: .85rem;
}

#addField #fieldEditorForm {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

#addField #content.field-editor-dialog > .close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 34px;
    height: 34px;
    min-height: 34px !important;
    margin: 0;
    padding: 0;
    appearance: none;
    background-image: none !important;
    background-color: var(--surface) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 50%;
    z-index: 5;
}

#addField #content.field-editor-dialog > .close::before,
#addField #content.field-editor-dialog > .close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 2px;
    background: var(--text-soft);
    border-radius: 2px;
}

#addField #content.field-editor-dialog > .close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

#addField #content.field-editor-dialog > .close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

#addField #content.field-editor-dialog > .close:hover {
    background-color: var(--surface-2) !important;
}

#addField .field-editor-layout {
    display: grid;
    min-height: 0;
    flex: 1 1 auto;
    grid-template-columns: minmax(300px, .8fr) minmax(420px, 1.2fr);
    overflow: hidden;
}

#addField .field-type-panel,
#addField .field-config-panel {
    min-width: 0;
    overflow-y: auto;
    padding: 26px 30px 32px;
}

#addField .field-type-panel {
    background: var(--surface-1);
    border-right: 1px solid var(--border);
}

#addField .field-panel-heading {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
}

#addField .field-step {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    color: #fff;
    background: var(--primary);
    border-radius: 50%;
    font-size: .78rem;
    font-weight: 750;
}

#addField .field-panel-heading h3 {
    margin: 1px 0 4px;
    color: var(--text);
    font-size: 1rem;
}

#addField .field-panel-heading .tip {
    margin: 0;
    line-height: 1.35;
}

body#newTopic #addField .fieldType {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin: 0 !important;
}

body#newTopic #addField .fieldType li {
    height: 94px !important;
    min-width: 0;
    padding: 0 0 30px;
    background-position: center 17px !important;
    background-size: 30px !important;
    overflow: hidden;
}

body#newTopic #addField .fieldType li:hover {
    transform: none;
}

body#newTopic #addField .fieldType li span {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 29px;
    align-items: center;
    justify-content: center;
    padding-inline: 4px;
    color: var(--text-soft) !important;
    background: transparent !important;
    border-top: 0;
    border-radius: 0;
    line-height: 1.2;
}

body#newTopic #addField .fieldType li.selected {
    color: var(--primary-dark);
    background-color: var(--primary-soft) !important;
    border: 2px solid var(--primary) !important;
    box-shadow: none;
}

body#newTopic #addField .fieldType li.selected span {
    color: var(--primary-dark) !important;
    background: transparent !important;
}

#addField .field-control-group {
    margin-bottom: 19px;
}

#addField .field-control-group label,
#addField .field-specific-options label {
    margin: 0 0 6px;
}

#addField .field-control-group .tip {
    margin: -2px 0 8px;
}

#addField .field-required-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 4px;
    padding: 15px 16px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

#addField .field-required-control strong,
#addField .field-required-control .tip {
    display: block;
}

#addField .field-required-control strong {
    color: var(--text-soft);
    font-size: .9rem;
}

#addField .field-required-control .tip {
    margin: 3px 0 0;
}

#addField .field-specific-options .fieldOptions:not(.hidden) {
    display: block;
    margin-top: 18px;
    padding: 16px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

#addField .select-options-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

#addField .select-options-heading label,
#addField .select-options-heading .tip {
    display: block;
}

#addField .select-options-heading label {
    margin: 0 0 2px;
}

#addField .select-options-heading .tip {
    margin: 0;
}

#addField .select-options-count {
    display: grid;
    place-items: center;
    min-width: 30px;
    height: 30px;
    padding-inline: 7px;
    color: var(--primary-dark);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 750;
}

#addField .select-options-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

#addField .select-option-row {
    display: grid;
    grid-template-columns: 22px minmax(110px, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 7px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color .15s ease, opacity .15s ease;
}

#addField .select-option-row.drag-over {
    border-color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary);
}

#addField .select-option-row.dragging {
    opacity: .45;
}

#addField .select-option-handle {
    color: var(--text-subtle);
    font-size: 20px;
    cursor: grab;
    user-select: none;
}

#addField .select-option-row > input {
    min-width: 0;
    height: 38px;
    margin: 0;
    padding: 8px 10px;
    color: var(--text);
    background: var(--surface-1);
    border-radius: var(--radius-sm);
}

#addField .select-option-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

#addField .select-option-action {
    display: grid;
    place-items: center;
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    margin: 0;
    padding: 0;
    color: var(--text-muted) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

#addField .select-option-action:hover:not(:disabled) {
    color: var(--primary) !important;
    background: var(--surface-2) !important;
}

#addField .select-option-action:disabled {
    opacity: .25;
    cursor: default;
}

#addField .select-option-action.is-delete:hover {
    color: var(--danger) !important;
    background: var(--danger-bg) !important;
}

#addField .select-option-action .material-symbols-outlined {
    font-size: 18px;
}

#addField .select-option-composer {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) auto;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

#addField .select-option-composer > input {
    min-width: 0;
    height: 40px;
    margin: 0;
    padding: 9px 11px;
}

#addField .select-option-composer .select-option-add {
    display: inline-flex;
    width: auto;
    min-width: 112px;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 0;
    padding: 8px 12px !important;
}

#addField .select-option-add .material-symbols-outlined {
    font-size: 18px;
}

#addField #fieldOptions {
    display: none !important;
}

#addField .field-editor-actions {
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 30px;
    background: var(--surface);
    border-top: 1px solid var(--border);
}

#addField .field-editor-actions .button {
    width: auto;
    min-width: 108px;
    min-height: 40px;
    padding: 9px 16px !important;
    margin: 0;
}

#addField .field-cancel-button {
    color: var(--text-soft) !important;
    background: var(--surface) !important;
    border: 1px solid var(--border-strong) !important;
}

#addField .field-save-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#addField .field-save-button .material-symbols-outlined {
    font-size: 20px;
}

@media (max-width: 960px) {
    body#newTopic main .content.topic-editor {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 18px !important;
    }

    body#newTopic .topic-form-card {
        position: static;
    }

    body#newTopic #newTopicFields div.fieldContainer {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    body#newTopic #newTopicFields .drag-handle {
        display: none;
    }

    button.field-move-action {
        display: grid;
    }
}

@media (max-width: 760px) {
    body#newTopic main .content.topic-editor {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 14px !important;
    }

    body#newTopic .topic-form-card {
        position: static;
    }

    body#newTopic .topic-form-header,
    body#newTopic .topic-form-grid {
        padding: 18px;
    }

    body#newTopic .topic-image-preview {
        height: 150px !important;
    }

    body#newTopic .topic-fields-header {
        flex-direction: column;
    }

    body#newTopic .topic-fields-actions,
    body#newTopic #addNewField {
        width: 100%;
    }

    body#newTopic #addNewField {
        justify-content: center;
    }

    body#newTopic #newTopicFields div.fieldContainer {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 10px !important;
        padding: 13px !important;
    }

    body#newTopic #newTopicFields .field-card-actions {
        justify-content: flex-end;
        padding-top: 0;
        border-top: 0;
    }

    body#newTopic footer.right {
        padding: 10px 14px;
    }

    body#newTopic footer.right .footerContainer {
        width: 100%;
        justify-content: center;
    }

    #addField {
        align-items: stretch;
        padding: 0;
    }

    #addField #content.field-editor-dialog {
        width: 100%;
        height: 100dvh;
        max-width: none;
        max-height: none;
        border: 0;
        border-radius: 0 !important;
    }

    #addField .field-editor-header {
        padding: calc(18px + env(safe-area-inset-top)) 20px 16px;
    }

    #addField .field-editor-layout {
        display: block;
        overflow-y: auto;
    }

    #addField .field-type-panel,
    #addField .field-config-panel {
        overflow: visible;
        padding: 20px;
    }

    #addField .field-type-panel {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    body#newTopic #addField .fieldType {
        display: flex !important;
        gap: 8px;
        margin-inline: 0 !important;
        padding: 0 0 8px !important;
        overflow-x: auto;
        scroll-padding-inline: 0;
        scroll-snap-type: x proximity;
    }

    body#newTopic #addField .fieldType li {
        width: 90px !important;
        min-width: 90px;
        scroll-snap-align: start;
    }

    #addField .field-editor-actions {
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        box-shadow: 0 -8px 24px rgba(25, 38, 45, .08);
    }

    #addField .field-editor-actions .button {
        min-width: 104px;
        min-height: 42px;
        flex: 0 1 auto;
    }

    #addField .field-save-button {
        min-width: 132px !important;
    }

    #addField .select-option-row {
        grid-template-columns: minmax(100px, 1fr) auto;
    }

    #addField .select-option-handle {
        display: none;
    }

    #addField .select-option-composer {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

@media (max-width: 390px) {
    body#newTopic .topic-form-header,
    body#newTopic .topic-form-grid {
        padding: 16px;
    }

}

/* =========================================================
   New category — integrated creation flow
   ========================================================= */
body#newTopic main .content.topic-editor.is-creation-flow {
    display: block !important;
    width: min(100%, 1760px) !important;
    max-width: 100vw !important;
    padding: clamp(20px, 2.5vw, 40px) !important;
    box-sizing: border-box !important;
    margin-inline: auto !important;
}

body#newTopic form.topic-builder-card {
    display: block;
    width: 100%;
    padding: 0 !important;
    box-sizing: border-box;
}

.topic-builder-card {
    display: block;
    width: 100%;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.topic-builder-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 22px clamp(22px, 3vw, 36px);
    background: var(--surface-1);
    border-bottom: 1px solid var(--border);
}

.topic-builder-topbar h2 {
    margin: 0 0 3px;
    color: var(--text);
}

.topic-builder-topbar .topic-section-kicker {
    margin-bottom: 3px;
}

.topic-builder-steps {
    display: flex;
    min-width: 390px;
    align-items: center;
}

.topic-builder-step {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--text-muted);
    white-space: nowrap;
}

.topic-builder-step > span,
.topic-flow-heading > span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    font-size: .78rem;
    font-weight: 750;
}

.topic-builder-step strong {
    font-size: .82rem;
    font-weight: 680;
}

.topic-builder-step.is-active > span,
.topic-builder-step.is-complete > span,
.topic-flow-heading > span {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
}

.topic-builder-step.is-active,
.topic-builder-step.is-complete {
    color: var(--primary-dark);
}

.topic-builder-step.is-complete > span {
    font-size: 0;
}

.topic-builder-step.is-complete > span::before {
    content: "check";
    font-family: 'Material Symbols Outlined';
    font-size: 18px;
    font-weight: 300;
}

.topic-builder-steps > i {
    height: 1px;
    min-width: 40px;
    flex: 1 1 auto;
    margin-inline: 12px;
    background: var(--border-strong);
}

.topic-builder-layout {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) minmax(0, 1.05fr);
    align-items: stretch;
}

.topic-basics-section,
.is-creation-flow .topic-fields-section {
    min-width: 0;
    padding: clamp(22px, 2.6vw, 34px);
}

.topic-basics-section {
    grid-column: 1;
    grid-row: 1;
    background: var(--surface);
    border-right: 1px solid var(--border);
}

body#newTopic .is-creation-flow .topic-fields-section {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
    /* A regra base "body#newTopic .topic-fields-section" pon padding:0;
       no fluxo de creación (paso 3) hai que restaurar o mesmo padding
       que as demais seccións para que non quede pegado á beira. */
    padding: clamp(22px, 2.6vw, 34px);
    background: var(--surface);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.topic-flow-heading {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.topic-flow-heading h3 {
    margin: 2px 0 4px !important;
    color: var(--text) !important;
    font-size: 1.08rem !important;
}

.topic-flow-heading p {
    margin: 0;
    color: var(--text-muted);
    font-size: .82rem;
    line-height: 1.45;
}

.topic-basics-section .topic-form-grid {
    display: block;
    padding: 24px 0 0;
}

.topic-basics-section .topic-form-media {
    margin-bottom: 24px;
}

.topic-basics-section .topic-image-preview {
    height: 170px !important;
}

body#newTopic .is-creation-flow .topic-fields-header {
    margin-bottom: 20px;
    padding-bottom: 18px;
}

body#newTopic .is-creation-flow #newTopicFields .topic-fields-empty {
    min-height: 300px;
}

.topic-builder-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px clamp(22px, 3vw, 36px);
    background: var(--surface-1);
    border-top: 1px solid var(--border);
}

.topic-mobile-navigation {
    display: none;
}

.topic-builder-summary {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--text-muted);
}

.topic-builder-summary .material-symbols-outlined {
    color: var(--primary);
    font-size: 22px;
}

.topic-builder-summary p {
    margin: 0;
    font-size: .85rem;
}

.topic-builder-summary strong {
    color: var(--text);
}

.topic-create-button {
    display: inline-flex !important;
    width: auto !important;
    min-width: 190px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 !important;
    padding: 10px 20px !important;
    color: #fff !important;
    background: var(--primary) !important;
    border: 1px solid var(--primary) !important;
    border-radius: var(--radius-sm) !important;
}

.topic-create-button:hover {
    background: var(--primary-dark) !important;
}

@media (max-width: 900px) {
    .topic-builder-topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .topic-builder-steps {
        width: 100%;
        min-width: 0;
    }

    .topic-builder-layout {
        grid-template-columns: 1fr;
    }

    .topic-basics-section,
    body#newTopic .is-creation-flow .topic-map-section,
    body#newTopic .is-creation-flow .topic-fields-section {
        grid-column: 1;
        grid-row: auto;
    }

    .topic-basics-section,
    body#newTopic .is-creation-flow .topic-map-section {
        border-right: 0;
    }

    body#newTopic .is-creation-flow .is-mobile-step-hidden {
        display: none !important;
    }

    .topic-mobile-navigation {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        display: grid;
        width: 100%;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 8px;
        padding: 12px clamp(18px, 4vw, 28px) calc(12px + env(safe-area-inset-bottom));
        background: var(--surface-1);
        border-top: 1px solid var(--border);
        box-shadow: 0 -8px 24px rgba(25, 38, 45, .08);
    }

    body#newTopic #newTopicBody,
    body#newProject #newProjectBody {
        padding-bottom: calc(84px + env(safe-area-inset-bottom));
    }

    body#newTopic .topic-builder-submit,
    body#newProject .project-builder-submit {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        width: 100%;
        padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
        background: var(--surface-1);
        box-shadow: 0 -8px 24px rgba(25, 38, 45, .08);
    }

    body#newTopic .topic-builder-submit .topic-builder-summary,
    body#newProject .project-builder-submit .topic-builder-summary {
        display: none;
    }

    body#newTopic .topic-builder-submit .topic-create-button,
    body#newProject .project-builder-submit .topic-create-button {
        width: 100% !important;
    }

    .topic-mobile-navigation button {
        display: inline-flex !important;
        width: 100% !important;
        min-width: 0;
        align-items: center;
        justify-content: center;
        gap: 7px;
        margin: 0 !important;
    }

    .topic-mobile-navigation button[hidden] {
        display: none !important;
    }

    #topicMobileStepCounter,
    #projectMobileStepCounter {
        color: var(--text-muted);
        font-size: .82rem;
        font-weight: 700;
        white-space: nowrap;
    }

    body#newTopic .is-creation-flow #newTopicFields .topic-fields-empty {
        min-height: 180px;
    }
}

@media (max-width: 560px) {
    body#newTopic main .content.topic-editor.is-creation-flow {
        padding: 12px !important;
    }

    .topic-builder-card {
        border-radius: var(--radius-md);
    }

    .topic-builder-topbar,
    .topic-basics-section,
    body#newTopic .is-creation-flow .topic-map-section,
    body#newTopic .is-creation-flow .topic-fields-section {
        padding: 18px;
    }

    .topic-builder-topbar {
        gap: 18px;
    }

    .topic-builder-step strong {
        display: none;
    }

    .topic-builder-steps > i {
        min-width: 18px;
        margin-inline: 7px;
    }

    body#newTopic .is-creation-flow .topic-fields-actions {
        width: 100%;
    }

    .topic-builder-submit {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        width: 100%;
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
        padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
        box-shadow: 0 -8px 24px rgba(25, 38, 45, .08);
    }

    .topic-create-button {
        width: 100% !important;
    }
}

/* ---------------------------------------------------------
   Banner de proxecto creado e alerta de campos baleiros
   --------------------------------------------------------- */
.creation-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0 0 18px;
    padding: 16px 18px;
    background: linear-gradient(135deg, rgba(18, 88, 77, .08), rgba(18, 88, 77, .02));
    border: 1px solid rgba(18, 88, 77, .25);
    border-radius: var(--radius-md);
}

.creation-banner-icon {
    flex: 0 0 auto;
    color: var(--primary);
    font-size: 28px;
    line-height: 1.2;
}

.creation-banner-body strong {
    display: block;
    margin-bottom: 3px;
    color: var(--primary-dark);
    font-size: .98rem;
}

.creation-banner-body p {
    margin: 0;
    color: var(--text-muted);
    font-size: .85rem;
    line-height: 1.45;
}

/* Alerta cando non hai campos */
body#newTopic .is-creation-flow .noFieldsAlert {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 28px 22px;
    text-align: center;
    background: var(--surface-2);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
}

.noFieldsAlert-icon {
    color: var(--warning, #d97706);
    font-size: 40px;
    line-height: 1;
}

.noFieldsAlert-title {
    color: var(--text);
    font-size: 1rem;
}

.noFieldsAlert-body {
    margin: 0;
    max-width: 46ch;
    color: var(--text-muted);
    font-size: .86rem;
    line-height: 1.5;
}

.noFieldsAlert-action {
    margin-top: 4px;
}

/* Botón de engadir campo destacado */
.topic-add-field-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 8px 16px !important;
    color: #fff !important;
    background: var(--primary) !important;
    border: 1px solid var(--primary) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow-btn);
}

.topic-add-field-button:hover {
    background: var(--primary-dark) !important;
}

.noFieldsAlert-action {
    width: 100%;
    max-width: 280px;
    min-height: 46px;
}

/* Botón de crear categoría deshabilitado */
.topic-create-button:disabled,
.topic-create-button[aria-disabled="true"] {
    color: var(--text-muted) !important;
    background: var(--surface-2) !important;
    border-color: var(--border-strong) !important;
    box-shadow: none !important;
    cursor: not-allowed;
    opacity: .7;
}

.topic-create-button:disabled:hover {
    background: var(--surface-2) !important;
}

/* Resaltado do paso de campos cando está baleiro */
.topic-fields-section.has-no-fields .topic-flow-heading > span {
    color: #fff;
    background: var(--warning, #d97706);
    border-color: var(--warning, #d97706);
    animation: pulse-warning 1.8s ease-in-out infinite;
}

@keyframes pulse-warning {
    0%, 100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, .0); }
    50% { box-shadow: 0 0 0 6px rgba(217, 119, 6, .18); }
}

/* =========================================================
   User preferences dialog
   ========================================================= */
#userSettings {
    padding: clamp(12px, 3vw, 40px);
}

#userSettings #content.user-settings-dialog {
    position: relative;
    display: flex;
    width: min(1040px, 100%);
    max-width: 1040px;
    height: auto;
    max-height: min(840px, 92vh);
    flex-direction: column;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-xl) !important;
}

#userSettings .user-settings-header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 13px;
    padding: 21px 28px;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border);
}

#userSettings .user-settings-header-copy {
    min-width: 0;
    flex: 1 1 auto;
    padding-right: 42px;
}

#userSettings .user-settings-header-icon {
    display: grid;
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    flex: 0 0 40px;
    place-items: center;
    padding: 0;
    box-sizing: border-box;
    color: var(--primary);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 50%;
}

#userSettings .user-settings-header .title {
    margin: 0 0 2px;
    color: var(--text);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: left !important;
}

#userSettings .user-settings-header p:last-child {
    overflow: hidden;
    margin: 0;
    color: var(--text-muted);
    font-size: .82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#userSettings #content.user-settings-dialog > .close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 34px;
    height: 34px;
    min-height: 34px;
    margin: 0;
    padding: 0;
    appearance: none;
    background-image: none !important;
    background-color: var(--surface) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 50%;
    z-index: 6;
}

#userSettings #content.user-settings-dialog > .close::before,
#userSettings #content.user-settings-dialog > .close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 2px;
    background: var(--text-soft);
    border-radius: 2px;
}

#userSettings #content.user-settings-dialog > .close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

#userSettings #content.user-settings-dialog > .close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

#userSettings .user-settings-form {
    display: flex;
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

#userSettings .user-settings-layout {
    display: grid;
    min-height: 0;
    flex: 1 1 auto;
    grid-template-columns: 270px minmax(0, 1fr);
    overflow: hidden;
}

#userSettings .user-profile-panel,
#userSettings .user-preferences-panel {
    min-width: 0;
    overflow-y: auto;
    padding: 26px 28px;
}

#userSettings .user-profile-panel {
    display: flex;
    align-items: center;
    flex-direction: column;
    background: var(--surface-1);
    border-right: 1px solid var(--border);
}

#userSettings .user-settings-section-label {
    align-self: flex-start;
    margin-bottom: 12px;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#userSettings .user-avatar-upload {
    position: relative;
    width: 126px;
    height: 126px;
    margin-bottom: 14px;
}

#userSettings #userMediaFile {
    width: 126px !important;
    height: 126px !important;
    min-height: 126px;
    aspect-ratio: 1;
    background-size: cover;
    background-position: center;
    border: 3px solid var(--surface);
    border-radius: 50% !important;
    box-shadow: 0 0 0 1px var(--border), var(--shadow-sm);
}

#userSettings .user-avatar-edit {
    position: absolute;
    right: 2px;
    bottom: 4px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: #fff;
    background: var(--primary);
    border: 3px solid var(--surface-1);
    border-radius: 50%;
    font-size: 17px;
}

#userSettings .user-profile-name,
#userSettings .user-profile-email {
    max-width: 100%;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#userSettings .user-profile-name {
    color: var(--text);
    font-size: 1rem;
}

#userSettings .user-profile-email {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: .78rem;
}

#userSettings .user-upgrade-card {
    display: flex;
    width: 100%;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    margin-top: 22px;
    padding: 14px;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: .78rem;
    text-align: center;
}

#userSettings .user-upgrade-card .button {
    width: auto;
    min-height: 36px;
    margin: 0;
    padding: 7px 13px !important;
}

#userSettings .user-account-actions {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 3px;
    margin-top: auto;
    padding-top: 26px;
}

#userSettings .user-account-link {
    display: flex;
    width: 100%;
    min-height: 36px;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin: 0;
    padding: 7px 9px;
    color: var(--text-muted) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: var(--radius-sm);
    font-size: .78rem;
    cursor: pointer;
}

#userSettings .user-account-link:hover {
    color: var(--primary) !important;
    background: var(--surface-2) !important;
}

#userSettings .user-account-link.is-danger {
    color: var(--danger) !important;
}

#userSettings .user-account-link.is-danger:hover {
    background: var(--danger-bg) !important;
}

#userSettings .user-account-link .material-symbols-outlined {
    font-size: 18px;
}

#userSettings .user-preferences-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#userSettings .user-settings-group {
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

#userSettings .user-settings-group-heading {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--border);
}

#userSettings .user-settings-group-heading .material-symbols-outlined {
    color: var(--primary);
    font-size: 20px;
}

#userSettings .user-settings-group-heading h3 {
    margin: 0;
    color: var(--text);
    font-size: .96rem;
}

#userSettings .user-settings-fields-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

#userSettings .user-setting-field {
    min-width: 0;
}

#userSettings .user-setting-field-wide {
    grid-column: 1 / -1;
}

#userSettings .user-setting-field label {
    display: block;
    margin: 0 0 6px;
    color: var(--text-soft);
    font-size: .8rem;
    font-weight: 650;
}

#userSettings .user-setting-field input,
#userSettings .user-setting-field select {
    width: 100%;
    height: 42px;
    margin: 0;
    padding: 9px 11px;
    color: var(--text);
    background: var(--surface-1);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
}

#userSettings .user-preference-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin-top: 12px;
    padding: 13px 14px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

#userSettings .user-preference-toggle strong,
#userSettings .user-preference-toggle span {
    display: block;
}

#userSettings .user-preference-toggle strong {
    color: var(--text-soft);
    font-size: .82rem;
}

#userSettings .user-preference-toggle > div > span {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: .75rem;
    line-height: 1.35;
}

#userSettings .user-settings-status {
    display: none;
    min-width: 0;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    padding: 12px 28px;
    border-top: 1px solid transparent;
}

#userSettings .user-settings-status.is-visible {
    display: grid;
}

#userSettings .user-settings-status-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    font-size: 19px;
}

#userSettings .user-settings-status > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}

#userSettings .user-settings-status-title {
    color: var(--text);
    font-size: .82rem;
    line-height: 1.3;
}

#userSettings .user-settings-status-message {
    overflow: hidden;
    color: var(--text-muted);
    font-size: .74rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#userSettings .user-settings-status.is-saving {
    background: var(--info-bg);
    border-color: #cfdce5;
}

#userSettings .user-settings-status.is-saving .user-settings-status-icon {
    color: var(--info);
    background: var(--surface);
    animation: user-settings-status-spin .9s linear infinite;
}

#userSettings .user-settings-status.is-success {
    background: var(--success-bg);
    border-color: #cfe0d5;
}

#userSettings .user-settings-status.is-success .user-settings-status-icon {
    color: var(--success-text);
    background: var(--surface);
}

#userSettings .user-settings-status.is-error {
    background: var(--danger-bg);
    border-color: #e8caca;
}

#userSettings .user-settings-status.is-error .user-settings-status-icon {
    color: var(--danger-text);
    background: var(--surface);
}

@keyframes user-settings-status-spin {
    to { transform: rotate(360deg); }
}

#userSettings .user-settings-actions {
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: 9px;
    padding: 14px 28px;
    background: var(--surface);
    border-top: 1px solid var(--border);
}

#userSettings .user-settings-actions .button {
    display: inline-flex;
    width: auto;
    min-width: 112px;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0;
    padding: 8px 15px !important;
}

#userSettings .user-settings-cancel {
    color: var(--text-soft) !important;
    background: var(--surface) !important;
    border: 1px solid var(--border-strong) !important;
}

#userSettings .user-settings-save {
    color: #fff !important;
    background: var(--primary) !important;
    border: 1px solid var(--primary) !important;
}

#userSettings .user-settings-save .material-symbols-outlined {
    font-size: 18px;
}

#userSettings .user-settings-save:disabled {
    cursor: wait;
    opacity: .72;
}

@media (max-width: 760px) {
    #userSettings {
        align-items: stretch;
        padding: 0;
    }

    #userSettings #content.user-settings-dialog {
        width: 100%;
        height: 100dvh;
        max-width: none;
        max-height: none;
        border: 0 !important;
        border-radius: 0 !important;
    }

    #userSettings .user-settings-header {
        padding: calc(16px + env(safe-area-inset-top)) 18px 15px;
    }

    #userSettings #content.user-settings-dialog > .close {
        top: calc(16px + env(safe-area-inset-top));
        right: 16px;
    }

    #userSettings .user-settings-layout {
        display: block;
        overflow-y: auto;
    }

    #userSettings .user-profile-panel,
    #userSettings .user-preferences-panel {
        overflow: visible;
        padding: 20px;
    }

    #userSettings .user-profile-panel {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    #userSettings .user-account-actions {
        margin-top: 0;
        padding-top: 18px;
    }

    #userSettings .user-settings-fields-grid {
        grid-template-columns: 1fr;
    }

    #userSettings .user-setting-field-wide {
        grid-column: auto;
    }

    #userSettings .user-settings-actions {
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        box-shadow: 0 -8px 24px rgba(25, 38, 45, .08);
    }

    #userSettings .user-settings-status {
        padding: 11px 18px;
    }

    #userSettings .user-settings-actions .button {
        min-width: 0;
        flex: 0 1 auto;
    }
}

/* Compact field actions shared by create/edit category and project view */
body#newTopic .topic-fields-actions,
body#project .topic-fields-actions {
    display: inline-flex;
    width: auto;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

body#newTopic .topic-field-count,
body#project .topic-field-count {
    display: inline-flex;
    width: auto;
    min-width: 0;
    height: 36px;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    color: var(--text-muted);
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: .76rem;
    font-weight: 600;
    line-height: 1;
}

body#newTopic .topic-field-count strong,
body#project .topic-field-count strong {
    color: var(--primary-dark);
    font-size: .9rem;
    line-height: 1;
}

body#newTopic #addNewField,
body#project #addNewField {
    display: inline-flex !important;
    width: auto !important;
    min-width: 0;
    min-height: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 !important;
    padding: 7px 11px !important;
    color: var(--primary) !important;
    background: transparent !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: none !important;
    font-size: .8rem;
}

body#newTopic #addNewField:hover,
body#project #addNewField:hover {
    color: var(--primary-dark) !important;
    background: var(--surface-2) !important;
    border-color: var(--primary-light) !important;
}

body#newTopic #addNewField .material-symbols-outlined,
body#project #addNewField .material-symbols-outlined {
    font-size: 18px;
}

@media (max-width: 560px) {
    body#newTopic .is-creation-flow .topic-fields-header {
        gap: 14px;
    }

    body#newTopic .is-creation-flow .topic-fields-actions {
        width: auto;
        align-self: flex-end;
    }
}

/* =========================================================
   New project — visibility control
   ========================================================= */
.visibility-control {
    margin-top: 24px;
    padding: 20px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.visibility-toggle-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.visibility-toggle-info strong {
    display: block;
    color: var(--text);
    font-size: .95rem;
    font-weight: 650;
    margin-bottom: 4px;
}

.visibility-toggle-info .tip {
    margin: 0;
    font-size: .82rem;
    color: var(--text-muted);
}

.visibility-switch {
    flex: 0 0 auto;
    margin-top: 4px;
}

.visibility-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.visibility-option {
    cursor: pointer;
}

.visibility-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.visibility-option-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    transition: border-color .15s ease, background .15s ease;
}

.visibility-option input[type="radio"]:checked + .visibility-option-content {
    border-color: var(--primary);
    background: var(--brand-soft);
}

.visibility-option-content .material-symbols-outlined {
    font-size: 24px;
    color: var(--primary);
}

.visibility-option-content strong {
    font-size: .9rem;
    font-weight: 650;
    color: var(--text);
}

.visibility-option-content .tip {
    font-size: .78rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.visibility-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    padding: 14px 16px;
    background: var(--brand-soft);
    border: 1px solid rgba(18, 88, 77, .15);
    border-radius: var(--radius-md);
    animation: fadeIn .2s ease;
}

.visibility-notice .material-symbols-outlined {
    flex: 0 0 auto;
    color: var(--primary);
    font-size: 22px;
}

.visibility-notice p {
    margin: 0;
    color: var(--text-soft);
    font-size: .85rem;
    line-height: 1.5;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   Community portal — public showcase (mesmo sistema visual ca app)
   ========================================================= */
body#community {
    min-height: 100vh;
    background: var(--light);
    font-family: var(--font-sans);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-y: auto;
}

.community-header {
    position: sticky;
    top: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px clamp(18px, 3vw, 48px);
    background: #fff;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 0 rgba(22, 32, 41, .03);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.community-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: -.02em;
    text-decoration: none;
}

.community-logo .logo-mark {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    color: #fff;
    background: var(--primary);
    border-radius: var(--radius-sm);
    font-size: 1.1rem;
    font-weight: 800;
}

.community-nav {
    display: flex;
    align-items: center;
    gap: 24px;
}

.community-nav a {
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 600;
    font-size: .9rem;
    transition: color .15s ease;
}

.community-nav a:hover {
    color: var(--primary);
}

.community-nav .community-cta {
    padding: 10px 22px;
    color: #fff;
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: background .18s ease, transform .18s ease;
}

.community-nav .community-cta:hover {
    background: var(--primary-dark);
    color: #fff;
    transform: translateY(-1px);
}

.community-hero {
    padding: clamp(56px, 9vw, 112px) clamp(20px, 4vw, 60px);
    text-align: center;
    background: url('../img/community_bg.png') center/cover no-repeat;
}

.community-hero h1 {
    margin: 0 0 20px;
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    font-weight: 700;
    color: var(--primary-dark);
    letter-spacing: -.03em;
    line-height: 1.1;
}

.community-hero p {
    max-width: 640px;
    margin: 0 auto 36px;
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    color: var(--text-muted);
    line-height: 1.6;
}

.community-hero .community-hero-stats-intro {
    margin-bottom: 0;
    font-weight: 650;
    color: var(--primary-dark);
}

.community-hero-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(20px, 4vw, 56px);
    margin-top: 18px;
}

.community-hero-stat {
    text-align: center;
}

.community-hero-stat strong {
    display: block;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 750;
    color: var(--primary);
    letter-spacing: -.02em;
    line-height: 1;
}

.community-hero-stat span {
    display: block;
    margin-top: 6px;
    font-size: .82rem;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

@media (max-width: 640px) {
    .community-hero-stats {
        gap: 8px;
        margin-top: 28px;
    }

    .community-hero-stat {
        flex: 1 1 90px;
        max-width: 120px;
        padding: 11px 8px 10px;
        background: rgba(255, 255, 255, .88);
        border: 1px solid rgba(255, 255, 255, .72);
        border-radius: 14px;
        box-shadow: 0 8px 22px rgba(4, 24, 21, .22);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .community-hero-stat strong {
        font-size: 1.65rem;
        color: var(--primary-dark);
    }

    .community-hero-stat span {
        margin-top: 5px;
        font-size: .68rem;
        color: var(--primary-dark);
    }
}

.community-section {
    padding: clamp(40px, 5vw, 80px) clamp(20px, 4vw, 60px);
}

.community-section-header {
    margin-bottom: 32px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.community-section-header > div:first-child {
    margin: 0;
}

.community-section-header h2 {
    margin: 0 0 6px;
    padding-left: 14px;
    border-left: 3px solid var(--accent);
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    color: var(--primary-dark);
    letter-spacing: -.02em;
    font-weight: 680;
}

.community-section-header p {
    margin: 0 0 0 17px;
    color: var(--text-muted);
    font-size: .9rem;
}

.community-projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: 22px;
}

.community-project-group + .community-project-group {
    margin-top: clamp(38px, 5vw, 64px);
}

.community-project-group-header {
    margin-bottom: 20px;
}

.community-project-group-featured .community-project-group-header h2 {
    border-left-color: #d39a16;
}

.community-project-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .6);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.community-project-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.community-project-card-image {
    width: 100%;
    height: 190px;
    background-size: cover;
    background-position: center;
    background-color: var(--surface-2);
}

.community-project-card-body {
    padding: 20px 20px 18px;
    flex: 1 1 auto;
}

.community-project-card-body h3 {
    margin: 0 0 8px;
    font-size: 1.1rem;
    color: var(--text);
    font-weight: 680;
    letter-spacing: -.01em;
}

.community-project-card-body p {
    margin: 0;
    color: var(--text-muted);
    font-size: .87rem;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.community-project-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    background: var(--surface-1);
}

.community-project-card-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: .8rem;
    color: var(--text-muted);
}

.community-project-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.community-project-card-meta .material-symbols-outlined {
    font-size: 16px;
    color: var(--primary);
}

.community-project-card-badge {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: var(--text-muted);
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    transition: background .15s ease, color .15s ease;
}

.community-project-card-badge .material-symbols-outlined {
    font-size: 20px;
}

.community-project-card:hover .community-project-card-badge {
    color: #fff;
    background: var(--primary);
}

.community-empty {
    text-align: center;
    padding: 80px 20px;
    color: var(--text-muted);
}

.community-empty .material-symbols-outlined {
    display: block;
    font-size: 48px;
    color: var(--surface-4);
    margin-bottom: 16px;
}

.community-empty p {
    margin: 0;
    font-size: .92rem;
}

.community-footer {
    padding: 40px clamp(20px, 4vw, 60px);
    text-align: center;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.community-footer p {
    margin: 0 0 8px;
    color: var(--text-muted);
    font-size: .85rem;
}

.community-footer .community-footer-logo {
    font-weight: 700;
    color: var(--primary);
}

.community-footer a {
    color: var(--primary);
    text-decoration: none;
    transition: color .15s ease;
}

.community-map-section {
    padding: clamp(40px, 5vw, 80px) clamp(20px, 4vw, 60px);
    background: var(--light);
}

.community-map-container {
    position: relative;
    z-index: 0;
    isolation: isolate;
    max-width: 1200px;
    margin: 0 auto;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.community-map-hint {
    margin-top: 4px;
    font-size: .82rem;
    color: var(--text-subtle);
    font-style: italic;
}

.community-two-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: stretch;
}

@media (min-width: 992px) {
    .community-two-col {
        grid-template-columns: 1.2fr 1fr;
        gap: 0;
    }

    .community-two-col .community-map-section {
        position: sticky;
        top: 0;
        height: 100vh;
        padding: clamp(40px, 5vw, 80px) clamp(20px, 4vw, 60px);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .community-two-col .community-map-container {
        width: 100%;
        max-width: none;
        flex: 1;
        min-height: 0;
    }

    .community-two-col .community-section {
        padding: clamp(40px, 5vw, 80px) clamp(20px, 4vw, 60px);
    }
}

.community-footer a:hover {
    color: var(--primary-dark);
}

/* Novidades da comunidade */
.community-news-section {
    background: linear-gradient(180deg, var(--brand-tint) 0%, var(--light) 100%);
}

.community-news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 22px;
    max-width: 1200px;
    margin: 0 auto;
}

.community-news-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .6);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.community-news-card:hover {
    border-color: var(--accent);
    box-shadow: 0 8px 24px rgba(0, 199, 168, .15);
    transform: translateY(-2px);
}

.community-news-card-image {
    width: 100%;
    height: 170px;
    background-size: cover;
    background-position: center;
    background-color: var(--surface-2);
}

.community-news-card-no-image {
    display: grid;
    place-items: center;
    background: var(--primary-soft);
}

.community-news-card-no-image .material-symbols-outlined {
    font-size: 48px;
    color: var(--primary);
    opacity: .5;
}

.community-news-card-body {
    padding: 18px 20px 22px;
    flex: 1 1 auto;
}

.community-news-card-date {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;
    font-size: .76rem;
    color: var(--text-subtle);
}

.community-news-card-date .material-symbols-outlined {
    font-size: 15px;
    color: var(--accent-dark);
}

.community-news-card-body h3 {
    margin: 0 0 8px;
    font-size: 1.1rem;
    color: var(--text);
    font-weight: 680;
    letter-spacing: -.01em;
}

.community-news-card-body p {
    margin: 0;
    color: var(--text-muted);
    font-size: .87rem;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.community-news-actions {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

.community-news-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 12px 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--primary);
    font-weight: 600;
    font-size: .88rem;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.community-news-toggle:hover {
    border-color: var(--accent);
    background: var(--accent-light);
    box-shadow: var(--shadow-sm);
}

.community-news-toggle .material-symbols-outlined {
    font-size: 20px;
}

.community-news-extra {
    margin-top: 22px;
}

/* Páxina individual de novidade */
.news-article {
    max-width: none;
    margin: 0 auto;
}

.news-article-hero {
    position: relative;
    max-width: 1100px;
    margin: 32px auto 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.news-article-hero-cover {
    min-height: clamp(320px, 46vw, 500px);
    display: flex;
    align-items: flex-end;
    text-align: left;
    background-position: center;
}

.news-article-hero-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 26, 23, .12) 18%, rgba(5, 26, 23, .88) 100%);
}

.news-article-hero .community-hero-text {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 820px;
}

.news-article-hero-cover h1 {
    color: #fff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}

.news-article-hero-cover .news-article-date {
    color: rgba(255, 255, 255, .86);
}

.news-article-hero-cover .news-article-date .material-symbols-outlined {
    color: var(--accent);
}

.news-article-date {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 10px;
    font-size: .78rem;
    color: var(--text-subtle);
}

.news-article-date .material-symbols-outlined {
    font-size: 15px;
    color: var(--accent-dark);
}

.news-article-cover {
    width: 100%;
    max-width: 760px;
    margin: 28px auto;
    height: clamp(200px, 32vw, 360px);
    background-size: cover;
    background-position: center;
    background-color: var(--surface-2);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.news-article-body {
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(30px, 5vw, 52px) clamp(20px, 4vw, 60px) 48px;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text-soft);
}

@media (max-width: 640px) {
    .news-article-hero {
        margin-top: 0;
        border-radius: 0;
    }

    .news-article-hero-cover {
        min-height: 280px;
        padding: 28px 18px 24px;
    }

    .news-article-body {
        padding-top: 26px;
    }
}

.news-article-body h1,
.news-article-body h2,
.news-article-body h3 {
    color: var(--text);
    font-weight: 680;
    letter-spacing: -.01em;
    margin: 1.4em 0 .6em;
}

.news-article-body h1 { font-size: 1.5rem; }
.news-article-body h2 { font-size: 1.3rem; }
.news-article-body h3 { font-size: 1.15rem; }

.news-article-body p {
    margin: 0 0 1em;
}

.news-article-body a {
    color: var(--primary);
    text-decoration: underline;
    text-decoration-color: rgba(18, 88, 77, .25);
    text-underline-offset: 2px;
    transition: text-decoration-color .15s ease, color .15s ease;
}

.news-article-body a:hover {
    color: var(--primary-dark);
    text-decoration-color: var(--primary);
}

.news-article-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin: 1.2em auto;
    box-shadow: var(--shadow-sm);
    display: block;
}

.news-article-body blockquote {
    margin: 1.2em 0;
    padding: 10px 20px;
    border-left: 3px solid var(--accent);
    background: var(--brand-tint);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text-soft);
    font-style: italic;
}

.news-article-body ul,
.news-article-body ol {
    margin: 0 0 1em;
    padding-left: 24px;
}

.news-article-body li {
    margin: .3em 0;
}

/* Botón "Ver todos os proxectos" */
.community-projects-actions {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

.community-projects-view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 12px 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--primary);
    font-weight: 600;
    font-size: .88rem;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}

.community-projects-view-all:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary-dark);
    box-shadow: var(--shadow-sm);
}

.community-projects-view-all .material-symbols-outlined {
    font-size: 20px;
}

/* Hero reducido para subpáxinas */
.community-hero-sm {
    padding: clamp(40px, 5vw, 70px) clamp(20px, 4vw, 60px) clamp(24px, 3vw, 40px);
}

.community-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    color: var(--primary);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    transition: color .15s ease;
}

.community-back-link:hover {
    color: var(--primary-dark);
}

.community-back-link .material-symbols-outlined {
    font-size: 18px;
}

/* Buscador de proxectos */
.community-projects-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.community-sort-form {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
}

.community-sort-form label {
    color: var(--text-muted);
    font-size: .82rem;
    font-weight: 650;
}

.community-sort-form select {
    height: 44px;
    box-sizing: border-box;
    margin: 0;
    padding: 8px 34px 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: .88rem;
    cursor: pointer;
}

.community-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    height: 44px;
    min-width: 260px;
    max-width: 360px;
}

.community-search-icon {
    position: absolute;
    top: 50%;
    left: 12px;
    font-size: 20px;
    color: var(--text-muted);
    pointer-events: none;
    transform: translateY(-50%);
}

.community-search-input {
    width: 100%;
    height: 44px;
    box-sizing: border-box;
    margin: 0;
    padding: 10px 40px 10px 40px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    font-size: .88rem;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* A busca de proxectos usa o mesmo icono integrado ca foro e novas. */
body#community #projectSearchInput.community-search-input {
    padding-left: 48px !important;
}

.community-search-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(18, 88, 77, .12);
}

.community-search-clear {
    position: absolute;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-muted);
    transition: background .15s ease, color .15s ease;
}

.community-search-clear:hover {
    background: var(--surface-2);
    color: var(--text);
}

.community-search-clear .material-symbols-outlined {
    font-size: 18px;
}

.community-featured-badge {
    position: absolute;
    z-index: 2;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 11px;
    color: #624100;
    background: rgba(255, 239, 177, .94);
    border: 1px solid rgba(183, 121, 0, .28);
    border-radius: 999px;
    box-shadow: 0 5px 16px rgba(63, 45, 5, .18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: .75rem;
    font-weight: 750;
    letter-spacing: .02em;
}

.community-featured-badge .material-symbols-outlined {
    font-size: 17px;
    font-variation-settings: 'FILL' 1;
}

.community-project-card-featured {
    border-color: rgba(183, 121, 0, .28);
}

.community-project-card-open {
    border-color: rgba(0, 145, 121, .46);
    box-shadow: 0 8px 24px rgba(0, 112, 94, .13), inset 0 3px 0 var(--accent);
}

.community-project-card-open:hover {
    border-color: var(--accent-dark);
    box-shadow: 0 14px 32px rgba(0, 112, 94, .20), inset 0 3px 0 var(--accent);
}

.community-project-card-open .community-project-card-footer {
    background: linear-gradient(90deg, rgba(0, 200, 166, .11), var(--surface-1) 72%);
}

.community-open-badge {
    position: absolute;
    z-index: 2;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 11px;
    color: #fff;
    background: rgba(7, 105, 90, .94);
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 999px;
    box-shadow: 0 5px 16px rgba(4, 49, 42, .28);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: .75rem;
    font-weight: 750;
    letter-spacing: .01em;
}

.community-open-badge .material-symbols-outlined {
    font-size: 17px;
}

.community-project-card-badges {
    position: absolute;
    z-index: 2;
    top: 12px;
    right: 12px;
    left: 12px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    pointer-events: none;
}

.community-project-card-badges .community-featured-badge,
.community-project-card-badges .community-open-badge {
    position: static;
    min-width: 0;
    max-width: calc(70% - 4px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.community-project-card-badges .community-open-badge {
    margin-left: auto;
}

.community-project-open-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    margin: 8px 0 2px;
    padding: 7px 12px;
    color: #fff;
    background: rgba(0, 112, 94, .88);
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(4, 49, 42, .22);
    font-size: .78rem;
    font-weight: 750;
}

.community-project-open-pill .material-symbols-outlined {
    font-size: 18px;
}

@media (max-width: 700px) {
    .community-projects-toolbar,
    .community-sort-form,
    .community-search-wrapper {
        width: 100%;
        max-width: none;
    }

    .community-sort-form select {
        flex: 1;
    }
}

.community-no-results {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.community-no-results .material-symbols-outlined {
    font-size: 48px;
    color: var(--text-subtle);
    margin-bottom: 8px;
}

.community-pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    margin-top: 28px;
    color: var(--text-muted);
    font-size: .84rem;
}

.community-pagination a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: max-content;
    padding: 9px 14px;
    color: var(--primary);
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    text-decoration: none;
}

.community-pagination a:last-child {
    justify-self: end;
}

.community-pagination .material-symbols-outlined {
    font-size: 17px;
}

.community-section-header {
    gap: 16px;
}

@media (max-width: 768px) {
    .community-nav a:not(.community-cta) {
        display: none;
    }

    .community-projects-grid {
        grid-template-columns: 1fr;
    }

    .community-news-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Project & Topic views — modern style overrides
   ========================================================= */

/* Section headings uniformes */
body#project .section-heading,
body#topic .section-heading {
    margin: 32px 0 18px;
}

body#project .section-heading h3,
body#topic .section-heading h3 {
    margin: 0;
    padding-left: 14px;
    border-left: 3px solid var(--accent);
    font-size: 1.1rem;
    font-weight: 680;
    color: var(--primary-dark);
}

body#project .section-heading .info,
body#topic .section-heading .info {
    margin: 8px 0 0 17px;
    color: var(--text-muted);
    font-size: .88rem;
}

/* Project description */
body#project .projectDescription {
    padding: 0;
    background: transparent !important;
}

body#project .projectDescription h1.title {
    margin: 0 0 8px !important;
    font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
    font-weight: 700 !important;
    color: var(--primary-dark) !important;
    letter-spacing: -.02em;
}

body#project .projectDescription > p {
    margin: 0 0 8px !important;
    color: var(--text-muted) !important;
    font-size: .95rem !important;
    line-height: 1.6;
}

/* Topic cards no container antigo */
body#project #projectTopics {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
}

body#project #topicsContainer {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)) !important;
    gap: 18px !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
}

body#project #projectTopics .topic {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
    flex-flow: initial !important;
    background-image: none !important;
    background-color: var(--surface) !important;
}

body#project #projectTopics .topic:hover {
    border-color: var(--border-strong) !important;
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-2px) !important;
    background-color: var(--surface) !important;
}

body#project #projectTopics .topic .main {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 16px !important;
    width: auto !important;
    flex-flow: row !important;
}

body#project #projectTopics .topic .main .picture {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    border-radius: var(--radius-md) !important;
    background-size: cover !important;
    background-position: center !important;
    box-shadow: var(--shadow-sm) !important;
    margin: 0 !important;
    aspect-ratio: 1 / 1 !important;
}

body#project #projectTopics .topic .main .desc {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    min-width: 0 !important;
    padding: 0 !important;
    width: auto !important;
    flex: 1 1 auto !important;
    text-align: left !important;
}

body#project #projectTopics .topic .main .name {
    font-size: 1rem !important;
    font-weight: 680 !important;
    color: var(--text) !important;
    margin: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body#project #projectTopics .topic .main .subtitle {
    font-size: .82rem !important;
    color: var(--text-muted) !important;
    margin: 0 !important;
    overflow: hidden;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.4 !important;
    text-overflow: ellipsis;
}

body#project #projectTopics .topic .main .observationCount {
    font-size: .78rem !important;
    color: var(--primary) !important;
    font-weight: 600 !important;
    margin: 4px 0 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px;
}

body#project #projectTopics .topic .action {
    display: grid !important;
    place-items: center !important;
    width: 52px !important;
    min-width: 52px !important;
    background: var(--surface-1) !important;
    background-image: none !important;
    border-left: 1px solid var(--border) !important;
    border-radius: 0 !important;
    transition: background .15s ease !important;
}

body#project #projectTopics .topic .action .material-symbols-outlined {
    color: var(--text-muted) !important;
    font-size: 22px;
    transition: color .15s ease;
}

body#project #projectTopics .topic .action:hover {
    background: var(--primary) !important;
}

body#project #projectTopics .topic .action:hover .material-symbols-outlined {
    color: #fff !important;
}

/* CV Models */
#newTopicModels {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)) !important;
    gap: 16px !important;
}

#newTopicModels .modelContainer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 18px !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    cursor: pointer !important;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
    margin: 0 !important;
}

#newTopicModels .modelContainer:hover {
    border-color: var(--border-strong) !important;
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-2px) !important;
}

#newTopicModels .modelContainer .model {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0 !important;
}

#newTopicModels .modelContainer .modelName {
    font-size: .95rem !important;
    font-weight: 680 !important;
    color: var(--text) !important;
}

#newTopicModels .modelContainer .modelDescription {
    font-size: .82rem !important;
    color: var(--text-muted) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#newTopicModels .modelContainer .icons {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
}

#newTopicModels .modelContainer .icons .material-symbols-outlined {
    font-size: 20px !important;
}

#newTopicModels .modelContainer .icons .modelStatus.green {
    color: var(--success) !important;
}

#newTopicModels .modelContainer .icons .modelStatus.warning {
    color: var(--warning) !important;
}

/* My observations list */
#userObservations .container {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

#userObservations #initialObservations,
#userObservations #allObservations {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

#userObservations .myObservation {
    margin: 0 !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
    overflow: hidden;
}

#userObservations .myObservation:hover {
    border-color: var(--border-strong) !important;
    box-shadow: var(--shadow-md) !important;
}

#userObservations .myObservation a {
    text-decoration: none !important;
    color: inherit !important;
}

#userObservations .myObservationDetails {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 16px !important;
}

#userObservations .myObservationDetails .material-symbols-outlined:not(.small) {
    color: var(--primary) !important;
    font-size: 22px !important;
    flex: 0 0 auto !important;
}

#userObservations .myObservationDetails .date {
    flex: 1 1 auto !important;
    color: var(--text-soft) !important;
    font-size: .88rem !important;
    font-weight: 500;
}

#userObservations .myObservationDetails .small {
    color: var(--text-muted) !important;
    font-size: 20px !important;
    flex: 0 0 auto !important;
}

#userObservations .info {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    background: var(--surface-1);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    font-size: .9rem;
}

/* Latest observations swiper */
.latest-observations-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body#project .latest-observations-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

body#project .latest-observations-button .material-symbols-outlined {
    font-size: 18px;
}

body#project .project-observations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    margin-top: 18px;
}

body#project #projectObservationsSlider[hidden],
body#project .project-observations-grid-mode[hidden],
body#project .project-observation-grid-card[hidden],
body#project .project-observations-pagination[hidden],
body#project .latest-observations-button[hidden],
body#project .project-observation-card-menu[hidden] {
    display: none !important;
}

body#project .project-observations-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 18px;
}

body#project .project-observations-pagination .button {
    display: inline-flex;
    width: auto;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 0 !important;
    padding: 8px 12px !important;
}

body#project .project-observations-pagination .button:disabled {
    cursor: default;
    opacity: .45;
}

body#project .project-observations-pagination .material-symbols-outlined { font-size: 19px; }

body#project .project-observations-page-status {
    min-width: 92px;
    color: var(--text-muted);
    font-size: .8rem;
    font-weight: 650;
    text-align: center;
}

body#project .project-observation-grid-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

body#project .project-observation-grid-link {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    color: var(--text);
    text-decoration: none;
}

body#project .project-observation-grid-card:hover {
    border-color: var(--primary-light);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

body#project .project-observation-grid-card img,
body#project .project-observation-grid-placeholder {
    display: grid;
    width: 100%;
    height: 130px;
    object-fit: cover;
    place-items: center;
    color: var(--primary);
    background: var(--surface-2);
}

body#project .project-observation-grid-placeholder { font-size: 38px; }

body#project .project-observation-grid-details {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 11px 12px 12px;
}

body#project .project-observation-grid-details strong,
body#project .project-observation-grid-details span,
body#project .project-observation-grid-details small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body#project .project-observation-grid-details strong { font-size: .86rem; }
body#project .project-observation-grid-details span { color: var(--text-muted); font-size: .78rem; }
body#project .project-observation-grid-details small { color: var(--text-subtle); font-size: .72rem; }

body#project .project-observation-menu-trigger {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    display: grid;
    width: 34px;
    height: 34px;
    padding: 0;
    place-items: center;
    color: #fff;
    background: rgba(7, 34, 30, .76) !important;
    border: 1px solid rgba(255, 255, 255, .34) !important;
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .22) !important;
}

body#project .project-observation-menu-trigger:hover {
    background: var(--primary-dark) !important;
}

body#project .project-observation-menu-trigger .material-symbols-outlined { font-size: 21px; }

body#project .project-observation-card-menu {
    position: absolute;
    top: 46px;
    right: 8px;
    z-index: 4;
    display: flex;
    flex-direction: column;
    min-width: 160px;
    max-width: calc(100% - 16px);
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

body#project .project-observation-card-menu button {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 10px;
    color: var(--text) !important;
    font-size: .8rem;
    font-weight: 600;
    text-align: left;
    background: transparent !important;
    border: 0 !important;
    border-radius: var(--radius-sm);
    box-shadow: none !important;
}

body#project .project-observation-card-menu button:hover { background: var(--surface-2) !important; }
body#project .project-observation-card-menu button.warning {
    color: var(--danger) !important;
    background: var(--danger-bg) !important;
}

body#project .project-observation-card-menu button.warning:hover {
    color: var(--danger-dark) !important;
    background: #f6e2e2 !important;
}

body#project .project-observation-card-menu .material-symbols-outlined {
    display: inline-flex !important;
    width: 20px !important;
    min-width: 20px;
    align-items: center;
    justify-content: center;
    color: var(--primary) !important;
    font-size: 19px !important;
    line-height: 1;
}

body#project .project-observation-card-menu button.warning .material-symbols-outlined {
    color: var(--danger) !important;
}

@media (max-width: 640px) {
    .latest-observations-actions { width: 100%; }
    body#project .latest-observations-button { flex: 1 1 auto; justify-content: center; }
    body#project .project-observations-pagination { gap: 7px; }
    body#project .project-observations-pagination .button { min-width: 40px; padding: 8px !important; }
    body#project .project-observations-pagination .button span:not(.material-symbols-outlined) { display: none; }
}

#lastObservations {
    flex-direction: column !important;
}

#lastObservations .swiper {
    width: 100% !important;
    padding: 4px 0 8px !important;
}

#lastObservations .swiper-slide {
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-sm) !important;
    background: var(--surface) !important;
}

#lastObservations .swiper-slide img {
    width: 100% !important;
    height: 180px !important;
    object-fit: cover !important;
    border-radius: 0 !important;
}

#lastObservations .swiper-slide .slideDetails {
    padding: 12px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

#lastObservations .swiper-slide .slideDetails span:first-child {
    font-weight: 680 !important;
    color: var(--text) !important;
    font-size: .9rem !important;
}

#lastObservations .swiper-slide .slideDetails .location {
    color: var(--text-muted) !important;
    font-size: .8rem !important;
}

#lastObservations .swiper-slide .slideDetails .small {
    color: var(--text-subtle) !important;
    font-size: .76rem !important;
}

/* Project map wrapper */
body#project .project-map-wrapper {
    position: relative !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
    box-shadow: var(--shadow-sm) !important;
    background: var(--surface) !important;
}

body#project .project-observations-counter {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    z-index: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 14px !important;
    background: rgba(255, 255, 255, .92) !important;
    border: 1px solid var(--border) !important;
    border-radius: 999px !important;
    box-shadow: var(--shadow-md) !important;
    font-size: .82rem !important;
    font-weight: 600 !important;
    color: var(--text-soft) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body#project .project-observations-counter .material-symbols-outlined {
    font-size: 18px !important;
    color: var(--primary) !important;
}

body#project #projectMap {
    width: 100% !important;
    height: 380px !important;
    border-radius: 0 !important;
}

body#project .map-fullscreen-button,
body#topic .map-fullscreen-button {
    position: absolute !important;
    bottom: 14px !important;
    right: 14px !important;
    z-index: 500 !important;
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    border: 1px solid var(--border) !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .92) !important;
    box-shadow: var(--shadow-md) !important;
    cursor: pointer !important;
    transition: background .15s ease, transform .15s ease !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body#project .map-fullscreen-button:hover,
body#topic .map-fullscreen-button:hover {
    background: var(--primary) !important;
    transform: scale(1.05) !important;
}

body#project .map-fullscreen-button .material-symbols-outlined,
body#topic .map-fullscreen-button .material-symbols-outlined {
    font-size: 22px !important;
    color: var(--primary) !important;
    transition: color .15s ease;
}

body#project .map-fullscreen-button:hover .material-symbols-outlined,
body#topic .map-fullscreen-button:hover .material-symbols-outlined {
    color: #fff !important;
}

/* Teacher tools */
body#project #teacherTools {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    margin: 0 !important;
    list-style: none !important;
    padding: 0 !important;
}

body#project .teacherTool {
    width: auto !important;
    max-width: 240px !important;
    margin: 0 !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
    cursor: pointer;
}

body#project .teacherTool:hover {
    border-color: var(--border-strong) !important;
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-2px) !important;
}

body#project .teacherTool a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 22px 18px !important;
    text-decoration: none !important;
    color: inherit !important;
}

body#project .teacherTool .material-symbols-outlined {
    font-size: 32px !important;
    color: var(--primary) !important;
    width: auto !important;
    height: auto !important;
}

body#project .teacherTool span:last-child {
    color: var(--text-soft) !important;
    font-size: .88rem !important;
    font-weight: 600 !important;
    text-align: center !important;
}

/* Topic view */
body#topic h1.title {
    margin: 0 0 12px !important;
    font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
    font-weight: 700 !important;
    color: var(--primary-dark) !important;
    letter-spacing: -.02em;
}

body#topic .topic-description-text {
    color: var(--text-muted) !important;
    font-size: .95rem !important;
    line-height: 1.6;
    margin: 0 0 8px;
}

body#topic .info {
    color: var(--text-muted) !important;
    font-size: .88rem !important;
}

/* Ranking list */
body#topic .rankingList {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

body#topic .rankingItem {
    display: grid !important;
    grid-template-columns: 36px 1fr auto !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: border-color .15s ease !important;
}

body#topic .rankingItem:hover {
    border-color: var(--border-strong) !important;
}

body#topic .rankPosition {
    display: grid !important;
    place-items: center !important;
    width: 32px !important;
    height: 32px !important;
    color: #fff !important;
    background: var(--primary) !important;
    border-radius: 50% !important;
    font-size: .82rem !important;
    font-weight: 700 !important;
}

body#topic .rankUser {
    color: var(--text) !important;
    font-weight: 600 !important;
    font-size: .92rem !important;
}

body#topic .rankCount {
    color: var(--primary) !important;
    font-weight: 700 !important;
    font-size: .95rem !important;
    padding: 4px 10px !important;
    background: var(--brand-soft) !important;
    border-radius: 999px !important;
}

/* Topic map container */
body#topic .mapContainer {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-sm) !important;
}

body#topic #observationsMap {
    width: 100% !important;
    height: 380px !important;
    min-height: 380px !important;
}

body#topic #observationsCount {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    z-index: 500 !important;
    display: grid !important;
    place-items: center !important;
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 10px !important;
    color: #fff !important;
    background: var(--primary) !important;
    border-radius: 999px !important;
    font-size: .78rem !important;
    font-weight: 700 !important;
    box-shadow: var(--shadow-md) !important;
}

/* Topic footer (Create observation button) */
body#topic footer.right {
    min-height: 72px;
    padding-inline: clamp(18px, 3vw, 42px);
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

body#topic footer.right .footerContainer {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    color: #fff;
    background: var(--primary);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
    font-weight: 600;
    text-transform: none !important;
}

body#topic footer.right .footerContainer:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

body#topic footer.right .footerContainer .material-symbols-outlined {
    font-size: 22px;
    line-height: 1;
    color: #fff !important;
}

body#topic footer.right .footerContainer span {
    margin: 0 !important;
    width: auto !important;
}

/* No fields / no models messages */
body#project .noFieldsYet,
body#topic .noFieldsYet {
    display: block !important;
    padding: 20px !important;
    text-align: center !important;
    color: var(--text-muted) !important;
    background: var(--surface-1) !important;
    border: 1px dashed var(--border-strong) !important;
    border-radius: var(--radius-md) !important;
    font-size: .9rem !important;
}

/* View more button */
#viewMoreButton.small {
    margin-top: 12px !important;
    min-height: 38px !important;
    font-size: .85rem !important;
    padding: 8px 16px !important;
    color: #fff !important;
}

/* "Ver todas" button fix */
body#project .button[style*="margin-top: 8px"] {
    margin-top: 16px !important;
}

/* =========================================================
   Edit project — categories list in right column
   ========================================================= */
body#newProject .project-map-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

body#newProject .project-map-section .container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    cursor: pointer;
    user-select: none;
}

body#newProject .project-map-section #customMapSource {
    gap: 8px;
}

body#newProject .project-map-section .info {
    font-size: .82rem;
    color: var(--text-muted);
    margin: 4px 0 8px;
}

body#newProject .project-map-section .custom-map-upload {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    color: var(--primary);
    background: var(--surface-1);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
    width: fit-content;
}

body#newProject .project-map-section .custom-map-upload:hover {
    border-color: var(--primary-light);
    background: var(--surface-2);
}

body#newProject .project-map-section .upload-mbtiles-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Map configuration belongs to each category. */
body#newTopic .topic-map-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

body#newTopic .is-creation-flow .topic-map-section {
    grid-column: 1;
    grid-row: 2;
    padding: clamp(22px, 2.6vw, 34px);
    background: var(--surface);
    border-right: 1px solid var(--border);
    border-top: 1px solid var(--border);
}

body#newTopic .topic-map-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 42px;
    padding: 10px 12px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

body#newTopic .topic-map-option strong {
    color: var(--text);
    font-size: .9rem;
    line-height: 1.35;
}

body#newTopic #topicMapSettings,
body#newTopic #customMapSource {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body#newTopic #topicMapSettings[hidden],
body#newTopic #customMapSource[hidden] {
    display: none;
}

body#newTopic .topic-map-section .info {
    margin: 0;
    color: var(--text-muted);
    font-size: .82rem;
}

body#newTopic .topic-map-section .custom-map-upload {
    width: fit-content;
    padding: 8px 14px;
    color: var(--primary);
    background: var(--surface-1);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
}

@media (max-width: 900px) {
    body#newTopic .is-creation-flow .topic-map-section {
        grid-column: 1;
        grid-row: auto;
        border-right: 0;
    }
}

@media (max-width: 560px) {
    body#newTopic .is-creation-flow .topic-map-section {
        padding: 18px;
    }
}

/* Categories list in edit project */
body#newTopic #projectTopicsList {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body#newTopic .project-topics-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 220px;
    padding: 32px 20px;
    text-align: center;
    background: var(--surface-1);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
}

body#newTopic .project-topics-empty > .material-symbols-outlined {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    color: var(--primary);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 50%;
    font-size: 28px;
}

body#newTopic .project-topics-empty p {
    margin: 0;
    color: var(--text-muted);
    font-size: .9rem;
}

body#newTopic .project-topics-empty .button {
    min-height: 40px;
    font-size: .85rem;
    padding: 8px 18px;
}

body#newTopic .project-topic-item {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

body#newTopic .project-topic-item:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

body#newTopic .project-topic-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-sm);
    background-size: cover;
    background-position: center;
    background-color: var(--surface-2);
    border: 1px solid var(--border);
    flex: 0 0 auto;
}

body#newTopic .project-topic-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

body#newTopic .project-topic-info strong {
    color: var(--text);
    font-size: .95rem;
    font-weight: 680;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body#newTopic .project-topic-info span {
    color: var(--text-muted);
    font-size: .82rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.4;
}

body#newTopic .project-topic-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

body#newTopic .project-topic-action {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

body#newTopic .project-topic-action:hover {
    background: var(--surface-2);
    color: var(--primary);
}

body#newTopic .project-topic-action .material-symbols-outlined {
    font-size: 20px;
}

/* Ligazón á xestión de usuarios en editProject */
body#newTopic .project-users-link {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    text-decoration: none;
    color: inherit;
}

body#newTopic .project-users-link:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

body#newTopic .project-users-link > .material-symbols-outlined:first-child {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-sm);
    background: var(--primary-bg, rgba(18, 88, 77, .08));
    color: var(--primary);
    font-size: 26px;
    flex: 0 0 auto;
}

body#newTopic .project-users-link > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

body#newTopic .project-users-link > div strong {
    color: var(--text);
    font-size: .95rem;
    font-weight: 680;
}

body#newTopic .project-users-link > div span {
    color: var(--text-muted);
    font-size: .82rem;
}

body#newTopic .project-users-link > .material-symbols-outlined:last-child {
    color: var(--text-muted);
    font-size: 20px;
}

@media (max-width: 960px) {
    body#newTopic .project-topic-item {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        gap: 10px;
        padding: 12px 14px;
    }

    body#newTopic .project-topic-icon {
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 760px) {
    body#newTopic .project-topics-empty {
        min-height: 180px;
    }
}

/* =========================================================
   Edit project — settings blocks in right column
   ========================================================= */
body#newTopic .topic-fields-section .project-settings-block {
    width: 100%;
    box-sizing: border-box;
    padding: 22px 24px;
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

body#newTopic .project-settings-block:last-child {
    margin: 0;
}

body#newTopic .project-settings-heading {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

body#newTopic .project-settings-heading h3 {
    margin: 4px 0 6px;
    color: var(--text);
    font-size: 1.08rem;
    font-weight: 680;
}

body#newTopic .project-settings-heading p {
    margin: 0;
    color: var(--text-muted);
    font-size: .82rem;
    line-height: 1.45;
}

body#newTopic .project-settings-heading .topic-section-kicker {
    margin-bottom: 3px;
}

body#newTopic .project-settings-block .topic-fields-header {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

body#newTopic .project-settings-block .topic-fields-header .topic-fields-heading h3 {
    margin: 4px 0 6px;
}

@media (max-width: 760px) {
    body#newTopic .topic-fields-section .project-settings-block {
        margin-bottom: 24px;
    }
}

/* =========================================================
   Edit project — mobile: each settings block as separate card
   ========================================================= */
@media (max-width: 760px) {
    body#newTopic .topic-fields-section .project-settings-block {
        padding: 18px;
        margin-bottom: 14px;
    }

    body#newTopic .project-settings-block:last-child {
        margin-bottom: 0;
    }

    body#newTopic .project-settings-heading {
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--border);
    }

    body#newTopic .project-settings-block .topic-fields-header {
        margin-bottom: 16px;
        padding-bottom: 12px;
    }
}

/* =========================================================
   Community project detail page
   ========================================================= */
.community-project-hero {
    position: relative;
    min-height: 300px;
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
    padding: 0;
}

.community-project-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13, 51, 60, .25) 0%, rgba(13, 51, 60, .78) 100%);
}

.community-project-hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 60px) clamp(24px, 4vw, 40px);
}

.community-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
    font-size: .85rem;
    font-weight: 600;
    transition: color .15s ease;
}

.community-back-link:hover {
    color: #fff;
}

.community-back-link .material-symbols-outlined {
    font-size: 20px;
}

.community-project-hero-content h1 {
    margin: 0 0 10px;
    font-size: clamp(1.6rem, 4vw, 2.6rem);
    font-weight: 700;
    color: #fff;
    letter-spacing: -.02em;
    line-height: 1.12;
}

.community-project-hero-content h1,
.community-project-hero-main h1 {
    color: #fff;
}

.community-project-hero-content > p,
.community-project-hero-main > p {
    max-width: 640px;
    margin: 0 0 20px;
    color: rgba(255, 255, 255, .88);
    font-size: clamp(.92rem, 1.8vw, 1.05rem);
    line-height: 1.55;
}

.community-project-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(14px, 3vw, 32px);
}

.community-project-hero-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, .9);
}

.community-project-hero-stat .material-symbols-outlined {
    font-size: 22px;
    color: rgba(255, 255, 255, .7);
}

.community-project-hero-stat strong {
    font-size: 1.3rem;
    font-weight: 700;
}

.community-project-hero-stat > span:last-child {
    font-size: .82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .65);
}

/* Observations grid */
.community-observations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 18px;
}
.community-observation-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.community-observation-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.community-observation-image {
    width: 100%;
    height: 180px;
    background-size: cover;
    background-position: center;
    background-color: var(--surface-2);
}

.community-observation-no-image {
    display: grid;
    place-items: center;
    color: var(--surface-4);
}

.community-observation-no-image .material-symbols-outlined {
    font-size: 40px;
}

.community-observation-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
}

.community-observation-author {
    font-weight: 680;
    color: var(--text);
    font-size: .9rem;
}

.community-observation-place {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
    font-size: .82rem;
}

.community-observation-place .material-symbols-outlined {
    font-size: 16px;
    color: var(--primary);
}

/* CTA join section */
.community-cta-join {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 560px;
    margin: 0 auto;
    padding: clamp(40px, 6vw, 72px) 20px;
}

.community-cta-join .material-symbols-outlined {
    font-size: 48px;
    color: var(--primary);
    margin-bottom: 8px;
}

.community-cta-join h2 {
    margin: 0;
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    color: var(--primary-dark);
}

.community-cta-join p {
    margin: 0;
    color: var(--text-muted);
    font-size: .95rem;
    line-height: 1.6;
}

/* Layout de 2 columnas para páxina de proxecto comunitario */
.community-project-layout {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 1200px;
    margin: 0 auto;
    gap: 0;
}

@media (min-width: 992px) {
    .community-project-layout {
        grid-template-columns: 1fr 360px;
        gap: 0;
    }

    .community-project-aside {
        position: sticky;
        top: 64px;
        align-self: start;
        max-height: calc(100vh - 64px);
        overflow-y: auto;
        padding: clamp(24px, 4vw, 48px) clamp(16px, 3vw, 28px) clamp(24px, 4vw, 48px) 0;
    }

    .community-project-main {
        padding: clamp(24px, 4vw, 48px) 0 clamp(24px, 4vw, 48px) clamp(20px, 4vw, 60px);
    }
}

.community-section-sm {
    padding: clamp(20px, 3vw, 36px) 0;
}

.community-section-sm:first-child {
    padding-top: 0;
}

.community-section-sm .community-section-header {
    margin-bottom: 20px;
}

.community-topics-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 14px;
}

.community-topic-card {
    cursor: default;
}

.community-topic-card .community-project-card-image {
    height: 140px;
}

.community-topic-card .community-project-card-body {
    padding: 14px 16px;
}

.community-topic-card .community-project-card-body h3 {
    font-size: 1rem;
}

.community-topic-card .community-project-card-body p {
    font-size: .82rem;
    -webkit-line-clamp: 2;
}

.community-observation-card {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.community-observation-card .community-observation-image {
    height: 150px;
}

.community-observation-card .community-observation-body {
    padding: 10px 14px;
}

.community-cta-join-sm {
    padding: clamp(24px, 4vw, 40px) 20px;
    gap: 6px;
}

.community-cta-join-sm .material-symbols-outlined {
    font-size: 36px;
    margin-bottom: 4px;
}

.community-cta-join-sm h2 {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
}

.community-cta-join-sm p {
    font-size: .88rem;
}

@media (max-width: 768px) {
    .community-observations-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
    }

    .community-project-hero {
        min-height: 300px;
    }
}

/* =========================================================
   User dashboard — modernizado
   ========================================================= */

/* Botón "Novo proxecto" no header da sección */
.dashboard-projects-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.dashboard-projects-header h2 {
    margin: 0 !important;
    padding-left: 14px;
    border-left: 3px solid var(--accent);
    font-size: 1.15rem;
    font-weight: 680;
    color: var(--primary-dark);
}

.dashboard-new-project-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    min-height: 40px !important;
    padding: 9px 20px !important;
    font-size: .88rem !important;
    font-weight: 600;
}

.dashboard-new-project-btn .material-symbols-outlined {
    font-size: 20px;
}

/* User profile card — single column layout */
body#user .user-profile-card {
    padding: 0 !important;
    overflow: hidden;
}

/* Hero de benvida */
body#user .user-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 32px 24px 24px;
    background: linear-gradient(170deg, var(--primary-soft) 0%, var(--surface) 60%);
    color: var(--text);
    text-align: center;
    border-bottom: 1px solid var(--border);
}

body#user .user-hero-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: var(--surface-2);
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px var(--border), 0 6px 18px rgba(12, 61, 54, .14);
}

body#user .user-hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

body#user .user-hero-content .topic-section-kicker {
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .72rem;
    font-weight: 600;
}

body#user .user-hero-content h2 {
    margin: 0;
    padding-left: 0;
    color: var(--primary-dark);
    border-left: 0;
    font-size: 1.3rem;
    font-weight: 700;
}

body#user .user-hero-role {
    padding: 4px 12px;
    color: var(--primary-dark);
    background: var(--primary-soft);
    border-radius: var(--radius-full);
    font-size: .76rem;
    font-weight: 600;
}

body#user .user-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding: 0;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border);
}

body#user .user-hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 16px 8px;
    border-right: 1px solid var(--border);
}

body#user .user-hero-stat:last-child {
    border-right: 0;
}

body#user .user-hero-stat strong {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary-dark);
    line-height: 1;
}

body#user .user-hero-stat span {
    font-size: .74rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Banner de benvida na cabeceira da columna de proxectos */
body#user .user-welcome-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    overflow: hidden;
    padding: 22px 26px;
    background: var(--gradient-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-brand-md);
    color: #fff;
}

body#user .user-welcome-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 150% at 100% 0%, rgba(0, 200, 166, .38) 0%, transparent 55%);
    pointer-events: none;
}

body#user .user-welcome-text {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

body#user .user-welcome-kicker {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .72rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .82);
}

body#user .user-welcome-banner h2 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
}

body#user .user-welcome-banner p {
    margin: 0;
    max-width: 52ch;
    font-size: .92rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, .9);
}

body#user .user-welcome-icon {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    font-size: 60px;
    color: rgba(255, 255, 255, .3);
}

body#user .user-welcome-logo {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    object-fit: contain;
    padding: 4px;
    background: #fff;
    border-radius: var(--radius-md);
}

body#user .user-profile-card .topic-form-header {
    display: none;
}

body#user .user-profile-body {
    display: flex;
    flex-direction: column;
    padding: 24px;
}

body#user .user-profile-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

body#user .user-profile-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

body#user .user-avatar-preview {
    width: 96px !important;
    height: 96px !important;
    min-width: 96px;
    min-height: 96px;
    background-size: cover !important;
    background-position: center !important;
    background-color: var(--surface-2);
    border: 3px solid var(--surface) !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 1px var(--border), var(--shadow-sm);
}

body#user .user-profile-name {
    margin: 0;
    color: var(--primary-dark) !important;
    font-size: 1.1rem !important;
    font-weight: 700;
    text-align: center;
    line-height: 1.25;
    text-shadow: none;
}

p#currentUserName {
    text-shadow: none;
}

body#user .user-profile-role {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    color: var(--primary-dark);
    background: var(--primary-soft);
    border-radius: var(--radius-full);
    font-size: .78rem;
    font-weight: 650;
}

body#user .user-profile-fields {
    display: none;
}

body#user .user-profile-field label {
    display: block;
    margin: 0 0 6px;
    color: var(--text-soft);
    font-size: .82rem;
    font-weight: 650;
}

body#user .user-profile-field input {
    width: 100%;
}

/* Upgrade inline — visible solo si o usuario é student (popup de settings) */
body#user .user-upgrade-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: .82rem;
    color: var(--text-muted);
}

body#user .user-upgrade-inline .button {
    min-height: 36px !important;
    padding: 7px 14px !important;
    font-size: .82rem !important;
}

/* Quick actions — icon-only buttons */
body#user .user-quick-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

body#user .user-icon-action {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    color: var(--text-muted) !important;
    background: var(--surface-1) !important;
    border: 1px solid var(--border) !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

body#user .user-icon-action:hover {
    color: var(--primary) !important;
    background: var(--surface-2) !important;
    border-color: var(--border-strong) !important;
}

body#user .user-icon-action.is-danger:hover {
    color: var(--danger) !important;
    background: var(--danger-bg) !important;
    border-color: var(--danger) !important;
}

body#user .user-icon-action .material-symbols-outlined {
    font-size: 22px;
}

/* Settings button — solo visible en móvil como acceso rápido */
body#user .user-profile-settings-btn {
    display: none;
}

/* Empty state for projects list */
body#user .project-topics-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 220px;
    padding: 32px 20px;
    text-align: center;
    background: var(--surface-1);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
}

body#user .project-topics-empty > .material-symbols-outlined {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    color: var(--primary);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 50%;
    font-size: 28px;
}

body#user .project-topics-empty p {
    margin: 0;
    color: var(--text-muted);
    font-size: .9rem;
}

body#user .project-topics-empty .button {
    min-height: 40px;
    font-size: .85rem;
    padding: 8px 18px;
}

/* Offline/pending observations banner — salientado no dashboard */
body#user #offlineObservations.offline-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 12px 0;
    padding: 16px 18px;
    text-decoration: none;
    color: var(--text);
    background: linear-gradient(135deg, var(--surface) 0%, var(--surface-1) 100%);
    border: 1px solid var(--primary);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

body#user #offlineObservations.offline-banner:hover {
    border-color: var(--primary-dark);
    border-left-color: var(--primary-dark);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

body#user .offline-banner-icon {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    color: #fff;
    background: var(--primary);
    border-radius: 50%;
    font-size: 24px;
}

body#user .offline-banner-body {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

body#user .offline-banner-body strong {
    color: var(--text);
    font-size: .95rem;
}

body#user .offline-banner-body span {
    color: var(--text-muted);
    font-size: .82rem;
}

body#user .offline-banner-arrow {
    flex: 0 0 auto;
    color: var(--primary);
    font-size: 22px;
}

/* Project cards no dashboard */
/* Project cards en user */
body#user #projectsList .project {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .6) !important;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    cursor: pointer;
}

body#user #projectsList .project:hover {
    border-color: var(--border-strong) !important;
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-2px);
}

body#user #projectsList .project.has-pending-review {
    border-color: #d9b96e !important;
}

body#user #projectsList .project .picture {
    position: relative;
}

body#user #projectsList .project-pending-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    color: var(--warning-text);
    background: rgba(255, 249, 232, .96);
    border: 1px solid #d9b96e;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-md);
    font-size: .76rem;
    font-weight: 650;
    line-height: 1;
    pointer-events: none;
    backdrop-filter: blur(5px);
}

body#user #projectsList .project-pending-badge .material-symbols-outlined {
    font-size: 18px;
}

body#user #projectsList .project-pending-badge strong {
    display: inline-grid;
    min-width: 20px;
    height: 20px;
    place-items: center;
    padding: 0 4px;
    color: #fff;
    background: var(--warning-text);
    border-radius: var(--radius-full);
    box-sizing: border-box;
    font-size: .72rem;
}

body#user #projectsList .project .title {
    padding: 16px 18px 8px !important;
    font-size: 1.02rem;
    font-weight: 680;
    color: var(--text);
}

body#user #projectsList .project .details {
    align-self: end;
    padding: 8px 18px 16px !important;
}

body#user #projectsList .project .details .observations {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .82rem;
    color: var(--text-muted);
}

body#user #projectsList .project .details .observations .material-symbols-outlined {
    font-size: 18px;
    color: var(--primary);
}

body#user #projectsList .project .details .material-symbols-outlined:last-child {
    color: var(--text-subtle);
    font-size: 20px;
}

/* =========================================================
   Mobile footer — floating bottom bar (Figma style)
   ========================================================= */
@media (max-width: 959px) {
    body#user > #content > footer.fixed,
    body#user > section#content > footer.fixed,
    body#user footer.fixed {
        position: fixed !important;
        inset: auto auto max(12px, env(safe-area-inset-bottom)) 50% !important;
        transform: translateX(-50%);
        width: calc(100% - 24px) !important;
        max-width: 420px;
        min-height: 0 !important;
        height: 60px;
        padding: 0 !important;
        background: var(--surface) !important;
        border: 1px solid var(--border) !important;
        border-radius: 30px !important;
        box-shadow: 0 8px 30px rgba(13, 51, 60, .14) !important;
        display: flex !important;
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
        gap: 0;
        z-index: 100;
    }

    body#user footer.fixed::before {
        display: none !important;
    }

    /* The floating bar leaves the grid flow; keep content clear of it. */
    body#user > #content > main,
    body#user > section#content > main {
        grid-row: 2 / 4;
    }

    body#user main > .content {
        padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
    }

    /* Dissolve the groups so the icons and the FAB share one flex row,
       balanced 3 | FAB | 2 across the bar. */
    body#user footer.fixed .iconGroup,
    body#user footer.fixed .iconGroup.left,
    body#user footer.fixed .iconGroup.right {
        display: contents !important;
    }

    body#user footer.fixed .iconGroup.left .footerIcon:nth-child(1) { order: 1; }
    body#user footer.fixed .iconGroup.left .footerIcon:nth-child(2) { order: 2; }
    body#user footer.fixed .iconGroup.left .footerIcon:nth-child(3) { order: 3; }
    body#user footer.fixed .iconGroup.left .footerIcon:nth-child(4) { order: 5; }
    body#user footer.fixed .iconGroup.right .footerIcon { order: 6; }

    body#user footer.fixed .footerIcon {
        min-width: 0 !important;
        width: 44px !important;
        height: 44px !important;
        min-height: 0 !important;
        padding: 0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background .2s ease;
    }

    body#user footer.fixed .footerIcon:hover,
    body#user footer.fixed .footerIcon:active {
        background: var(--primary-soft);
    }

    body#user footer.fixed .footerIcon .material-symbols-outlined {
        color: var(--text-muted) !important;
        font-size: 24px;
        transition: color .2s ease;
    }

    body#user footer.fixed .footerIcon:hover .material-symbols-outlined,
    body#user footer.fixed .footerIcon:active .material-symbols-outlined {
        color: var(--primary) !important;
    }

    body#user footer.fixed .icon-leyend {
        display: none !important;
    }

    /* FAB — elevated accent circle, centered */
    body#user footer.fixed .fab {
        display: flex !important;
        position: relative !important;
        inset: auto !important;
        order: 4;
        flex: 0 0 auto;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        align-self: center;
        transform: translateY(-30px);
    }

    body#user footer.fixed .fab span {
        display: grid;
        place-items: center;
        width: 56px !important;
        height: 56px !important;
        color: #fff !important;
        background: var(--primary) !important;
        border: 0 !important;
        border-radius: 50% !important;
        box-shadow: 0 6px 20px rgba(18, 88, 77, .4) !important;
        font-size: 30px;
        transition: transform .2s ease, box-shadow .2s ease;
    }

    body#user footer.fixed .fab span:active {
        transform: scale(0.94);
        box-shadow: 0 4px 14px rgba(18, 88, 77, .35) !important;
    }
}

/* =========================================================
   Mobile user dashboard — profile card + bottom bar
   ========================================================= */
@media (max-width: 959px) {
    /* Profile card — floating white card, avatar centered top */
    body#user .user-profile-card {
        background: var(--surface) !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
    }

    body#user .user-profile-card .topic-form-header {
        display: none !important;
    }

    /* Hero compacto en móbil */
    body#user .user-hero {
        padding: 24px 20px 20px;
    }

    body#user .user-hero-avatar {
        width: 72px;
        height: 72px;
    }

    body#user .user-hero-content h2 {
        font-size: 1.15rem;
    }

    body#user .user-hero-stats {
        grid-template-columns: repeat(3, 1fr);
    }

    body#user .user-hero-stat {
        padding: 12px 6px;
    }

    body#user .user-hero-stat strong {
        font-size: 1.2rem;
    }

    /* Móbil: non amosar o banner de benvida (aforrar espazo) */
    body#user .user-welcome-banner {
        display: none;
    }

    /* Móbil: ocultar accións do header da dereita (xa están no footer/FAB) */
    body#user header .tools .right .button,
    body#user header .tools .right .header-action,
    body#user header .tools .right .material-symbols-outlined,
    body#user header .tools .right a {
        display: none !important;
    }

    body#user .user-profile-body {
        display: none !important;
    }

    body#user .user-profile-avatar {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        margin: 0 !important;
    }

    body#user .user-profile-meta {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    body#user .user-avatar-preview {
        width: 88px !important;
        height: 88px !important;
        min-width: 88px;
        min-height: 88px;
        border: 4px solid var(--surface) !important;
        box-shadow: 0 2px 0 0 var(--border), 0 8px 24px rgba(13, 51, 60, .12) !important;
    }

    body#user .user-profile-name {
        margin: 0 !important;
        color: var(--primary-dark) !important;
        font-size: 1.3rem !important;
        font-weight: 700;
        text-align: center;
        line-height: 1.2;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        word-break: break-word;
        letter-spacing: -.02em;
    }

    body#user .user-profile-role {
        font-size: .72rem;
        padding: 4px 14px;
        color: var(--primary);
        background: var(--primary-soft);
        border: 0;
        border-radius: var(--radius-full);
        letter-spacing: .04em;
        text-transform: uppercase;
        font-weight: 650;
    }

    /* Hidden on mobile — accessible via settings popup */
    body#user .user-profile-fields,
    body#user .user-quick-actions,
    body#user .user-upgrade-inline,
    body#user .user-profile-settings-btn {
        display: none !important;
    }

    /* Projects list full-width */
    body#user .content.topic-editor {
        display: block !important;
        padding: 0 !important;
    }

    body#user .topic-fields-section {
        padding: 0 !important;
    }

    body#user .project-settings-block {
        padding: 0 !important;
    }

    body#user .topic-fields-header {
        padding: 18px 16px 10px;
        margin: 0 !important;
        border-bottom: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    body#user .topic-fields-actions {
        display: none !important;
    }

    /* Project cards: layout vertical con imaxe grande arriba */
    body#user #projectsList {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        padding: 0 14px 100px;
    }

    body#user #projectsList .project {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: 130px auto auto !important;
        padding: 0 !important;
        border-radius: var(--radius-md) !important;
        overflow: hidden;
        position: relative;
    }

    body#user #projectsList .project .picture {
        grid-column: 1;
        grid-row: 1;
        width: 100% !important;
        height: 130px !important;
        min-height: 130px !important;
        border-radius: 0 !important;
    }

    body#user #projectsList .project .title {
        grid-column: 1;
        grid-row: 2;
        padding: 14px 42px 4px 16px !important;
        font-size: 1rem;
        line-height: 1.3;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    body#user #projectsList .project .details {
        grid-column: 1;
        grid-row: 3;
        align-self: start;
        padding: 2px 16px 14px !important;
    }

    body#user #projectsList .project .details .material-symbols-outlined:last-child {
        position: absolute;
        right: 14px;
        top: 130px;
        transform: translateY(-50%);
        background: var(--surface);
        border-radius: 50%;
        padding: 4px;
        box-shadow: var(--shadow-sm);
    }

    /* Empty state compacto */
    body#user .project-topics-empty {
        min-height: 160px !important;
        margin: 16px 14px !important;
        padding: 24px 16px !important;
    }

    /* Offline/pending notices con menos padding */
    body#user #offlineObservations .info,
    body#user #pendingObservations .info {
        margin: 8px 14px;
        padding: 12px 14px;
    }
}

/* =========================================================
   Project view — topic-editor layout
   ========================================================= */
body#project .project-info-card {
    padding: 0 !important;
    overflow: hidden;
}

body#project .project-info-card .topic-form-header {
    margin: 0;
    padding: 22px 24px 18px;
    background: var(--surface-1);
}

body#project .project-info-card .topic-form-grid {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 24px;
}

body#project .project-image-preview {
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
    background-color: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: 20px;
}

body#project .project-description-text {
    margin: 0 0 16px;
    color: var(--text-muted);
    font-size: .92rem;
    line-height: 1.6;
}

body#project .project-info-meta {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

body#project .project-info-stat {
    display: flex;
    align-items: center;
    gap: 10px;
}

body#project .project-info-stat .material-symbols-outlined {
    color: var(--primary);
    font-size: 24px;
}

body#project .project-info-stat strong {
    display: block;
    color: var(--primary-dark);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
}

body#project .project-info-stat span {
    color: var(--text-muted);
    font-size: .78rem;
}

/* Aviso de moderación e accións do proxecto, na cabeceira da columna */
body#project .project-management-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

body#project .project-pending-review-alert {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    margin-right: auto;
    padding: 7px 10px;
    color: var(--warning-text);
    background: var(--warning-bg);
    border: 1px solid #e7d7b9;
    border-radius: var(--radius-sm);
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(111, 84, 41, .08);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

body#project .project-pending-review-alert:hover {
    color: var(--warning-text);
    border-color: var(--warning);
    box-shadow: 0 5px 14px rgba(111, 84, 41, .14);
    transform: translateY(-1px);
}

body#project .project-pending-review-icon {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    place-items: center;
    color: #fff;
    background: var(--warning);
    border-radius: 50%;
    font-size: 17px;
}

body#project .project-pending-review-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    line-height: 1.15;
}

body#project .project-pending-review-copy strong {
    font-size: .78rem;
    font-weight: 720;
}

body#project .project-pending-review-copy > span {
    margin-top: 3px;
    font-size: .7rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .045em;
}

body#project .project-pending-review-arrow {
    font-size: 18px;
}

/* Project actions bar — top of right column, right-aligned, addNewField style */
body#project .project-actions-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
}

body#project .project-action-chip {
    display: inline-flex !important;
    width: auto !important;
    min-width: 0;
    min-height: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 !important;
    padding: 7px 11px !important;
    color: var(--primary) !important;
    background: transparent !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: none !important;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}

body#project .project-action-chip:hover {
    color: var(--primary-dark) !important;
    background: var(--surface-2) !important;
    border-color: var(--primary-light) !important;
}

body#project .project-action-chip .material-symbols-outlined {
    font-size: 18px;
}

body#project .project-action-chip.is-danger {
    color: var(--danger) !important;
    border-color: var(--border-strong) !important;
}

body#project .project-action-chip.is-danger:hover {
    color: var(--danger-dark) !important;
    background: var(--danger-bg) !important;
    border-color: var(--danger) !important;
}

/* Hide mobile menu icon on desktop */
@media (min-width: 960px) {
    body#project .project-menu-mobile {
        display: none !important;
    }
}

body#project .project-topics-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 180px;
    padding: 28px 20px;
    text-align: center;
    background: var(--surface-1);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
}

body#project .project-topics-empty .material-symbols-outlined {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    color: var(--primary);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 50%;
    font-size: 28px;
}

body#project .project-topics-empty p {
    margin: 0;
    color: var(--text-muted);
    font-size: .9rem;
}

/* Section blocks — card-style visual separation */
body#project .topic-fields-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

body#project .project-settings-block {
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

body#project .project-settings-block .topic-fields-header {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

/* Distinguir "As miñas observacións" (persoal) das da comunidade:
   icona de contexto na cabeceira e tinte de marca no bloque comunitario */
body#project .block-context-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    color: var(--text-muted);
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 50%;
    font-size: 22px;
}

body#project .community-observations-block .block-context-icon {
    color: var(--text-muted);
    background: var(--surface-1);
    border-color: var(--border);
}

body#project .topic-fields-section > .offlineNotice,
body#project .topic-fields-section > .alert {
    margin: 0;
}

/* Topics grid inside block */
body#project #topicsContainer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    align-items: stretch;
    gap: 12px;
}

/* Topic cards — compact horizontal rows, consistent with the other category lists */
body#project #topicsContainer .topic {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: stretch;
    width: 100% !important;
    height: 100%;
    min-height: 96px;
    max-height: none !important;
    cursor: pointer;
    margin: 0 !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm) !important;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

body#project #topicsContainer .topic:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md) !important;
    border-color: var(--border-strong) !important;
}

body#project #topicsContainer .topic:focus-visible {
    outline: 3px solid rgba(18, 88, 77, .28);
    outline-offset: 2px;
    border-color: var(--primary) !important;
}

body#project #topicsContainer .topic .main {
    width: 100%;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px !important;
}

body#project #topicsContainer .topic .main .picture {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    height: 72px !important;
    min-height: 72px;
    max-height: 72px !important;
    margin: 0 !important;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm) !important;
    background-position: center;
    background-size: cover;
    box-shadow: none;
}

body#project #topicsContainer .topic .main .desc {
    width: auto !important;
    min-width: 0;
    flex: 1 1 auto;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 !important;
}

body#project #topicsContainer .topic .main .name {
    font-weight: 680;
    font-size: 1rem;
    color: var(--text);
    margin: 0 !important;
}

body#project #topicsContainer .topic .main .desc .subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.4;
    color: var(--text-muted);
    font-size: .85rem;
    margin: 0;
}

body#project #topicsContainer .topic .main .desc .observationCount {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .78rem;
    color: var(--primary);
    margin: 0;
    font-weight: 600;
}

body#project #topicsContainer .topic .action {
    position: static;
    width: 44px;
    height: auto;
    display: grid;
    place-items: center;
    background: var(--surface-1) !important;
    border-left: 1px solid var(--border);
    border-radius: 0 !important;
    background-image: none !important;
    transition: background .15s ease;
    padding: 0;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    cursor: pointer;
}

body#project #topicsContainer .topic .topic-start-observation {
    border: 0 !important;
}

body#project #topicsContainer .topic .topic-action-label {
    display: none;
}

body#project #topicsContainer .topic .action .material-symbols-outlined {
    color: var(--text-muted);
    font-size: 22px;
}

body#project #topicsContainer .topic:hover .action {
    background: var(--primary) !important;
}

body#project #topicsContainer .topic:hover .action .material-symbols-outlined {
    color: #fff;
}

/* Shared hierarchy for the contextual card in the left workspace column. */
body#project .project-info-card .topic-form-header h2,
body#topic .topic-info-card .topic-form-header h2,
body#newTopic .topic-form-card .topic-form-header h2,
body#user .user-profile-card .topic-form-header h2 {
    margin: 2px 0 0;
    color: var(--text);
    font-size: 1.35rem;
    line-height: 1.25;
    letter-spacing: -.015em;
}

body#project .project-info-card .topic-form-subtitle,
body#topic .topic-info-card .topic-form-subtitle,
body#newTopic .topic-form-card .topic-form-subtitle,
body#user .user-profile-card .topic-form-subtitle {
    margin-top: 6px;
}

/* As miñas observacións — tinte de acento (cian) para diferenciarse
   do bloque comunitario. Mantén a coherencia visual coa paleta pero
   sinala o carácter persoal da actividade. */
body#project .my-observations-block .block-context-icon {
    color: var(--accent-dark);
    background: var(--surface);
    border-color: rgba(0, 200, 166, .28);
}

body#project .my-observations-block .topic-section-kicker {
    color: var(--accent-dark);
}

body#project .my-observations-block .container > .info {
    border-color: rgba(0, 200, 166, .35);
    background: var(--accent-light);
    color: var(--accent-dark);
}

/* As miñas observacións — lista compacta sen imaxe.
   Diferénciase das cards comunitarias (swiper con imaxe) por ser
   unha lista vertical de filas con metadatos. */
body#project .my-observations-block #initialObservations,
body#project .my-observations-block #allObservations {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body#project .my-obs-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, background .15s ease;
}

body#project .my-obs-item:hover {
    border-color: var(--accent);
    border-left-color: var(--accent-dark);
    background: var(--accent-light);
    box-shadow: 0 4px 12px rgba(0, 200, 166, .14);
    transform: translateX(2px);
}

body#project .my-obs-date {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

body#project .my-obs-date .material-symbols-outlined {
    font-size: 16px;
    color: var(--accent-dark);
    flex: 0 0 auto;
}

body#project .my-obs-time {
    color: var(--text-muted);
    font-weight: 400;
}

body#project .my-obs-topic {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
    font-size: .82rem;
    color: var(--text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body#project .my-obs-topic .material-symbols-outlined {
    font-size: 15px;
    color: var(--text-muted);
    flex: 0 0 auto;
}

body#project .my-obs-place {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 30%;
    font-size: .78rem;
    color: var(--text-muted);
    overflow: hidden;
}

body#project .my-obs-place .material-symbols-outlined {
    font-size: 14px;
    color: var(--text-muted);
    flex: 0 0 auto;
}

body#project .my-obs-place .textOverflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body#project .my-obs-arrow {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--text-muted);
    font-size: 20px;
    transition: color .15s ease, transform .15s ease;
}

body#project .my-obs-item:hover .my-obs-arrow {
    color: var(--accent-dark);
    transform: translateX(2px);
}

/* My observations — galería de cards verticais */
body#project #initialObservations,
body#project #allObservations {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}

body#project .project-settings-block > .container {
    padding-left: 0;
    margin-bottom: 0;
}

body#project .obs-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

body#project .obs-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

body#project .obs-card-image {
    width: 100%;
    height: 120px;
    background-size: cover;
    background-position: center;
    background-color: var(--surface-2);
}

body#project .obs-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
}

body#project .obs-card-date,
body#project .obs-card-place {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .8rem;
    line-height: 1.3;
}

body#project .obs-card-date {
    color: var(--text);
    font-weight: 600;
}

body#project .obs-card-date .material-symbols-outlined {
    font-size: 15px;
    color: var(--primary);
    flex: 0 0 auto;
}

body#project .obs-card-time {
    color: var(--text-muted);
    font-weight: 400;
}

body#project .obs-card-place {
    color: var(--text-muted);
}

body#project .obs-card-place .material-symbols-outlined {
    font-size: 14px;
    color: var(--text-muted);
    flex: 0 0 auto;
}

body#project .container > .info {
    padding: 20px;
    color: var(--text-muted);
    background: var(--surface-1);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    text-align: center;
    font-size: .88rem;
}

/* Teacher tools inside block */
body#project #teacherTools {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

body#project .teacherTool {
    padding: 14px 16px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color .15s ease, background .15s ease;
}

body#project .teacherTool:hover {
    border-color: var(--primary-light);
    background: var(--surface);
}

body#project .teacherTool a {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-soft);
}

body#project .teacherTool .material-symbols-outlined {
    color: var(--primary);
    font-size: 22px;
}

/* Swiper — latest observations carousel */
body#project .project-settings-block .swiper {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body#project .swiper-wrapper {
    box-sizing: border-box;
}

body#project .swiper-slide.slide-normal {
    width: 220px;
    min-width: 220px;
    max-width: 220px;
    border-radius: var(--radius-md) !important;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: box-shadow .15s ease, transform .15s ease;
}

body#project .swiper-slide.slide-normal:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

body#project .swiper-slide.slide-normal img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    display: block;
}

body#project .swiper-slide.slide-normal .slideDetails {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px 14px;
}

body#project .swiper-slide.slide-normal .slideDetails > span:first-child {
    font-weight: 680;
    font-size: .88rem;
    color: var(--text);
}

body#project .swiper-slide.slide-normal .slideDetails .location {
    font-size: .76rem;
    color: var(--text-muted);
}

body#project .swiper-slide.slide-normal .slideDetails .small {
    font-size: .72rem;
    color: var(--text-subtle);
}

/* Override detail-layout — project now uses topic-editor */
body#project main.detail-layout,
body#project main {
    display: block !important;
}

body#project .content.topic-editor {
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    align-items: start;
    gap: clamp(20px, 2.2vw, 36px);
    width: min(100%, 1760px) !important;
    max-width: 100vw !important;
    padding: clamp(20px, 2.5vw, 40px) !important;
    box-sizing: border-box !important;
    margin-inline: auto !important;
}

body#project .project-info-card {
    position: sticky;
    top: 24px;
}

@media (max-width: 959px) {
    body#project .content.topic-editor {
        display: block !important;
        padding: 0 !important;
    }

    body#project .project-info-card {
        position: static;
        margin: 0 6px 8px !important;
    }

    body#project .project-info-card .topic-form-header {
        padding: 14px 14px 10px;
    }

    body#project .project-info-card .topic-form-grid {
        padding: 0 12px 12px;
    }

    body#project .project-image-preview {
        height: 150px;
        margin-bottom: 10px;
    }

    body#project .topic-fields-section {
        padding: 0 6px !important;
        gap: 8px;
    }

    body#project .project-settings-block {
        padding: 12px;
        border-radius: var(--radius-md);
    }

    body#project .topic-fields-header {
        padding: 0;
        margin: 0 0 10px !important;
        padding-bottom: 10px;
    }

    body#project #topicsContainer {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    body#project #topicsContainer .topic {
        display: grid !important;
        grid-template-columns: 1fr !important;
        min-height: 0;
        border-radius: var(--radius-md) !important;
        border-color: var(--border-strong) !important;
        box-shadow: 0 4px 14px rgba(25, 38, 45, .08) !important;
    }

    body#project #topicsContainer .topic .main {
        display: grid;
        grid-template-columns: 88px minmax(0, 1fr);
        align-items: center;
        gap: 14px;
        padding: 14px !important;
    }

    body#project #topicsContainer .topic .main .desc {
        width: auto !important;
        padding: 0 !important;
        gap: 5px;
    }

    body#project #topicsContainer .topic .main .picture {
        width: 88px !important;
        min-width: 88px !important;
        max-width: 88px !important;
        height: 88px !important;
        min-height: 88px;
        max-height: 88px !important;
        aspect-ratio: auto;
    }

    body#project #topicsContainer .topic .main .name {
        font-size: 1.05rem;
        line-height: 1.25;
    }

    body#project #topicsContainer .topic .main .desc .subtitle {
        -webkit-line-clamp: 2;
        font-size: .82rem;
    }

    body#project #topicsContainer .topic .action {
        width: 100%;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        color: var(--primary-dark);
        background: var(--primary-soft) !important;
        border-top: 1px solid var(--border) !important;
        border-left: 0;
        border-radius: 0 !important;
        font-size: .86rem;
        font-weight: 700;
    }

    body#project #topicsContainer .topic .action .topic-action-label {
        display: inline;
    }

    body#project #topicsContainer .topic .action .material-symbols-outlined {
        color: var(--primary-dark);
        font-size: 20px;
    }

    body#project #topicsContainer .topic .topic-view-category {
        color: var(--primary);
        background: var(--surface-1) !important;
        border-top-color: var(--border) !important;
    }

    body#project #topicsContainer .topic .topic-view-category .material-symbols-outlined {
        color: var(--primary);
    }

    body#project #initialObservations,
    body#project #allObservations {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 10px;
    }

    body#project .obs-card-image {
        height: 90px;
    }

    body#project .obs-card-body {
        padding: 10px 12px;
    }

    body#project #teacherTools {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    body#project .teacherTool {
        padding: 12px 14px;
    }

    body#project .swiper-slide.slide-normal {
        width: 180px;
        min-width: 180px;
        max-width: 180px;
    }

    body#project .swiper-slide.slide-normal img {
        height: 110px;
    }

    /* Hide desktop actions bar on mobile — use header menu instead */
    body#project .project-actions-bar {
        display: none !important;
    }

    body#project .project-management-row {
        display: block;
        margin: 0 0 8px;
    }

    body#project .project-pending-review-alert {
        display: flex;
        width: 100%;
        min-height: 62px;
        margin: 0;
        padding: 11px 13px;
        border-radius: var(--radius-md);
        box-sizing: border-box;
    }

    body#project .project-pending-review-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        font-size: 20px;
    }

    body#project .project-pending-review-copy {
        flex: 1 1 auto;
    }

    body#project .project-pending-review-copy strong {
        font-size: .88rem;
    }

    body#project .project-pending-review-copy > span {
        font-size: .72rem;
    }

    body#project .project-pending-review-arrow {
        font-size: 20px;
    }
}

/* =========================================================
   Topic + user management — wide cards and compact mobile
   ========================================================= */
body#userManagement #assignToUser {
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    align-items: start;
    gap: clamp(20px, 2.2vw, 36px);
    width: min(100%, 1760px) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding: clamp(20px, 2.5vw, 40px) !important;
    box-sizing: border-box;
}

body#userManagement .user-management-invite,
body#userManagement .user-management-users {
    min-width: 0;
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

body#userManagement .user-management-invite {
    position: sticky;
    top: 24px;
}

body#userManagement .user-management-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

body#userManagement .user-management-section-copy {
    min-width: 0;
}

body#userManagement .user-management-section-copy .topic-section-kicker {
    margin-bottom: 5px;
}

body#userManagement .user-management-section-copy h2 {
    margin: 0;
    color: var(--text);
    font-size: clamp(1.25rem, 2vw, 1.55rem);
    line-height: 1.2;
}

body#userManagement .user-management-section-copy p {
    max-width: 58ch;
    margin: 6px 0 0;
    color: var(--text-muted);
    font-size: .85rem;
    line-height: 1.5;
}

body#userManagement .user-management-users-heading {
    align-items: center;
}

body#userManagement .user-management-users-heading h2 {
    margin: 0;
}

body#userManagement #courseUserResultCount {
    flex: 0 0 auto;
    padding: 5px 9px;
    color: var(--text-muted);
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-size: .76rem;
    font-weight: 700;
}

body#userManagement .course-user-search {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 0 18px;
}

body#userManagement .course-user-search > .material-symbols-outlined {
    position: absolute;
    top: 50%;
    left: 12px;
    z-index: 1;
    color: var(--text-muted);
    font-size: 20px;
    transform: translateY(-50%);
    pointer-events: none;
}

body#userManagement #courseUserSearch {
    width: 100%;
    margin: 0;
    padding-left: 40px !important;
    background: var(--surface-1) !important;
}

body#userManagement .course-user-empty {
    margin: 0;
    padding: 22px 16px;
    color: var(--text-muted);
    background: var(--surface-1);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    font-size: .86rem;
    text-align: center;
}

body#userManagement .userWrapper[hidden],
body#userManagement .user-list-columns[hidden],
body#userManagement #teachersContainer[hidden],
body#userManagement #usersContainer[hidden],
body#userManagement #teachersHeading[hidden],
body#userManagement #usersHeading[hidden],
body#userManagement #courseUserEmpty[hidden] {
    display: none !important;
}

body#userManagement .user-management-invite form {
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

body#userManagement .user-management-invite form > label {
    margin-top: 12px;
}

body#userManagement .user-management-invite form > label:first-child {
    margin-top: 0;
}

body#userManagement .user-management-invite input[type="text"] {
    width: 100%;
    margin: 6px 0 0;
}

body#userManagement .button-container {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin: 18px 0 0;
}

body#userManagement .button-container .left-buttons,
body#userManagement .button-container .right-buttons {
    display: flex;
    min-width: 0;
    flex: 1 1 0;
}

body#userManagement .button-container button,
body#userManagement #uploadCsvButton {
    width: 100%;
    min-height: 42px;
    margin: 0;
    padding: 9px 12px !important;
}

body#userManagement .user-management-users > h3 {
    margin: 20px 0 10px;
    color: var(--text-muted);
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

body#userManagement #teachersContainer,
body#userManagement #usersContainer {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 8px !important;
    overflow: visible !important;
    padding: 0 !important;
}

body#userManagement .user-list-columns {
    display: none;
}

body#userManagement .userWrapper {
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
}

body#userManagement #assignToUser #users .user {
    display: grid;
    width: 100%;
    min-width: 0;
    height: 100%;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color .15s ease, background .15s ease;
}

body#userManagement #assignToUser #users .user:hover {
    background: var(--surface);
    border-color: var(--border-strong);
}

body#userManagement #assignToUser img.avatar {
    width: 48px !important;
    height: 48px;
    border: 2px solid var(--surface) !important;
    box-shadow: 0 0 0 1px var(--border);
}

body#userManagement #assignToUser .details {
    width: auto;
    min-width: 0;
    margin: 0;
}

body#userManagement #assignToUser span.name,
body#userManagement #assignToUser span.email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body#userManagement #assignToUser #users .details .tools {
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    margin-top: 8px;
}

body#userManagement #assignToUser #users .details .tools .user-row-action {
    display: grid;
    width: 32px !important;
    height: 32px;
    min-height: 32px;
    place-items: center;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--primary) !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 50% !important;
    cursor: pointer;
}

body#userManagement #assignToUser #users .details .tools .user-row-action .material-symbols-outlined {
    font-size: 18px;
}

body#userManagement #assignToUser #users .details .tools .user-row-action.is-danger {
    color: var(--danger) !important;
}

@media (min-width: 960px) {
    body#userManagement .user-list-columns {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1.35fr) minmax(76px, auto);
        align-items: center;
        gap: 14px;
        padding: 9px 14px;
        color: var(--text-muted);
        background: var(--surface-1);
        border: 1px solid var(--border);
        border-bottom: 0;
        border-radius: var(--radius-sm) var(--radius-sm) 0 0;
        font-size: .7rem;
        font-weight: 750;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    body#userManagement #teachersContainer,
    body#userManagement #usersContainer {
        display: block !important;
        overflow: hidden !important;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    }

    body#userManagement .userWrapper {
        display: block;
    }

    body#userManagement #assignToUser #users .user {
        display: grid;
        height: auto;
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 14px;
        padding: 10px 14px;
        background: var(--surface);
        border: 0;
        border-bottom: 1px solid var(--border);
        border-radius: 0;
    }

    body#userManagement .userWrapper:last-child .user {
        border-bottom: 0 !important;
    }

    body#userManagement #assignToUser .details {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(76px, auto);
        align-items: center;
        gap: 14px;
    }

    body#userManagement #assignToUser #users .details .tools {
        justify-content: flex-end;
        margin: 0;
    }

    body#userManagement #assignToUser #users .user:hover {
        background: var(--surface-1);
    }

    body#userManagement #assignToUser #users .details .tools .user-row-action:hover {
        color: #fff !important;
        background: var(--primary) !important;
        border-color: var(--primary) !important;
    }

    body#userManagement #assignToUser #users .details .tools .user-row-action.is-danger:hover {
        color: #fff !important;
        background: var(--danger) !important;
        border-color: var(--danger) !important;
    }
}

@media (max-width: 959px) {
    body#topic main.detail-layout > .detail-media {
        width: calc(100% - 12px);
        height: 190px !important;
        margin: 6px 6px 0 !important;
        border-radius: var(--radius-md) !important;
    }

    body#topic main.detail-layout > .content {
        padding: 12px 6px !important;
    }

    body#topic .section-heading {
        margin: 18px 0 8px;
    }

    body#topic #listOfFields {
        gap: 6px;
    }

    body#topic #listOfFields li {
        gap: 10px;
        padding: 10px;
        border-radius: var(--radius-md);
    }

    body#topic .mapContainer,
    body#topic .userRanking {
        border-radius: var(--radius-md) !important;
    }

    body#topic #observationsMap {
        height: 300px !important;
        min-height: 300px !important;
    }

    body#topic .userRanking {
        padding: 6px;
    }

    body#topic .rankingList {
        gap: 6px !important;
    }

    body#topic .rankingItem {
        gap: 10px !important;
        padding: 10px 12px !important;
    }

    body#topic footer.right {
        padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
    }

    body#userManagement #assignToUser {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 0 6px 12px !important;
    }

    body#userManagement .user-management-invite,
    body#userManagement .user-management-users {
        padding: 12px;
        border-radius: var(--radius-md);
    }

    body#userManagement .user-management-invite {
        position: static;
    }

    body#userManagement .user-management-section-heading {
        align-items: flex-start;
        margin-bottom: 14px;
        padding-bottom: 12px;
    }

    body#userManagement .user-management-users-heading {
        align-items: center;
        margin-bottom: 14px;
    }

    body#userManagement .course-user-search {
        margin-bottom: 12px;
    }

    body#userManagement .button-container {
        gap: 6px;
        margin-top: 12px;
    }

    body#userManagement #teachersContainer,
    body#userManagement #usersContainer {
        grid-template-columns: 1fr;
        gap: 6px !important;
    }

    body#userManagement #assignToUser #users .user {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 10px;
        padding: 10px;
    }

    body#userManagement #assignToUser img.avatar {
        width: 44px !important;
        height: 44px;
    }
}

/* Topic view — same card workspace as project */
body#topic main {
    display: block !important;
}

body#topic .content.topic-view-editor {
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    align-items: start;
    gap: clamp(20px, 2.2vw, 36px);
    width: min(100%, 1760px) !important;
    max-width: 100vw !important;
    padding: clamp(20px, 2.5vw, 40px) !important;
    margin-inline: auto !important;
}

body#topic .topic-info-card {
    position: sticky;
    top: 24px;
    padding: 0 !important;
    overflow: hidden;
}

body#topic .topic-info-card .topic-form-header {
    margin: 0;
    padding: 22px 24px 18px;
    background: var(--surface-1);
}

body#topic .topic-info-card .topic-form-header h2 {
    margin: 4px 0 0;
    color: var(--text);
    font-size: 1.35rem;
}

body#topic .topic-info-card .topic-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 24px;
}

body#topic .topic-image-preview {
    width: 100%;
    height: 200px;
    margin-bottom: 20px;
    background-color: var(--surface-2);
    background-position: center;
    background-size: cover;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

body#topic .topic-info-card .topic-description-text {
    margin: 0 0 14px;
}

body#topic .topic-observation-tip {
    margin: 0;
    padding: 12px 14px;
    color: var(--text-muted);
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: .82rem;
    line-height: 1.45;
}

body#topic .topic-info-meta {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

body#topic .topic-info-stat {
    display: flex;
    align-items: center;
    gap: 10px;
}

body#topic .topic-info-stat .material-symbols-outlined {
    color: var(--primary);
    font-size: 24px;
}

body#topic .topic-info-stat strong {
    display: block;
    color: var(--primary-dark);
    font-size: 1.2rem;
    line-height: 1;
}

body#topic .topic-info-stat span {
    color: var(--text-muted);
    font-size: .78rem;
}

body#topic .topic-view-sections {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 20px;
}

body#topic .topic-view-sections > .offlineNotice,
body#topic .topic-view-sections > .alert {
    margin: 0;
}

body#topic .project-settings-block {
    min-width: 0;
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

body#topic .project-settings-block .topic-fields-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 18px;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--border);
}

body#topic .project-settings-block .topic-fields-heading h3 {
    margin: 3px 0 0;
}

body#topic .topic-field-count {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    flex: 0 0 auto;
    padding: 6px 10px;
    color: var(--text-muted);
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-size: .74rem;
}

body#topic .topic-field-count strong {
    color: var(--text);
    font-size: .88rem;
}

body#topic .topic-view-actions {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

body#topic .topic-view-action {
    display: inline-flex !important;
    width: auto !important;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 !important;
    padding: 7px 11px !important;
    color: var(--primary) !important;
    background: transparent !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: none !important;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
}

body#topic .topic-view-action .material-symbols-outlined {
    font-size: 18px;
}

body#topic .topic-view-action.is-danger {
    color: var(--danger) !important;
}

body#topic #listOfFields {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 8px;
}

body#topic .project-settings-block .mapContainer {
    margin: 0;
}

body#topic .project-settings-block .userRanking {
    overflow: visible;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

body#topic .project-settings-block .rankingList {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px !important;
}

@media (max-width: 959px) {
    body#topic .content.topic-view-editor {
        display: block !important;
        padding: 0 !important;
    }

    body#topic .topic-info-card {
        position: static;
        margin: 0 6px 8px !important;
    }

    body#topic .topic-info-card .topic-form-header {
        padding: 14px 14px 10px;
    }

    body#topic .topic-info-card .topic-form-grid {
        padding: 0 12px 12px;
    }

    body#topic .topic-image-preview {
        height: 150px;
        margin-bottom: 10px;
    }

    body#topic .topic-info-meta {
        gap: 16px;
        margin-top: 14px;
        padding-top: 14px;
    }

    body#topic .topic-view-sections {
        gap: 8px;
        padding: 0 6px 12px;
    }

    body#topic .topic-view-actions {
        display: none !important;
    }

    body#topic .project-settings-block {
        padding: 12px;
        border-radius: var(--radius-md);
    }

    body#topic .project-settings-block .topic-fields-header {
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

    body#topic #listOfFields {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    body#topic #listOfFields li {
        gap: 10px;
        padding: 10px;
    }

    body#topic #observationsMap {
        height: 300px !important;
        min-height: 300px !important;
    }

    body#topic .project-settings-block .rankingList {
        grid-template-columns: 1fr;
        gap: 6px !important;
    }

    body#topic .rankingItem {
        gap: 10px !important;
        padding: 10px 12px !important;
    }

    body#topic footer.right {
        padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
    }
}

/* =========================================================
   Observation detail — full-width workspace
   ========================================================= */
body#observation main.observation-detail-layout {
    --observation-panel-padding: 24px;
    --observation-section-gap: 20px;
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    align-items: start;
    gap: clamp(20px, 2.2vw, 36px);
    width: min(100%, 1760px);
    max-width: none;
    margin-inline: auto;
    padding: clamp(20px, 2.5vw, 40px);
    background: var(--light);
}

body#observation .observation-summary-card,
body#observation .observation-panel {
    min-width: 0;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

body#observation .observation-summary-card {
    position: sticky;
    top: 0;
}

body#observation .observation-summary-card .topPicture {
    position: relative;
    width: 100%;
    height: clamp(190px, 23vh, 260px);
    margin: 0;
    overflow: visible;
    background-position: center;
    background-size: cover;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none;
}

body#observation .observation-summary-card .topPicture::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(13, 51, 60, .36));
}

body#observation .observation-summary-card .userPicture {
    position: absolute;
    right: 22px;
    bottom: -30px;
    z-index: 2;
    width: 68px;
    height: 68px;
    margin: 0;
    object-fit: cover;
    background: var(--surface);
    border: 4px solid var(--surface);
    border-radius: 50%;
    box-shadow: var(--shadow-md);
}

body#observation .observation-summary-content {
    padding: 26px 24px 24px;
}

body#observation .observation-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: var(--primary);
    font-size: .72rem;
    font-weight: 750;
    letter-spacing: .09em;
    text-transform: uppercase;
}

body#observation .observation-summary-content h2 {
    margin: 0 72px 24px 0;
    color: var(--text);
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    overflow-wrap: anywhere;
}

body#observation .observation-author,
body#observation .observation-category,
body#observation .observation-date {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--text-muted);
}

body#observation .observation-author {
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

body#observation .observation-author > .material-symbols-outlined,
body#observation .observation-category > .material-symbols-outlined,
body#observation .observation-date > .material-symbols-outlined {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    color: var(--primary);
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 50%;
    font-size: 18px;
}

body#observation .observation-author div,
body#observation .observation-category div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

body#observation .observation-author small,
body#observation .observation-category small {
    font-size: .7rem;
}

body#observation .observation-author strong,
body#observation .observation-category strong {
    overflow: hidden;
    color: var(--text);
    font-size: .88rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body#observation .observation-category,
body#observation .observation-date {
    margin-top: 12px;
    font-size: .78rem;
}

body#observation .observation-category-edit {
    width: min(100%, 240px);
    min-height: 38px;
    margin: 2px 0 0;
    padding: 7px 30px 7px 10px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: .86rem;
}

body#observation main .content.observation-detail-sections {
    display: grid;
    gap: var(--observation-section-gap);
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 !important;
    border: 0;
    box-sizing: border-box;
}

body#observation .observation-panel {
    width: 100%;
    margin: 0;
    padding: var(--observation-panel-padding);
    box-sizing: border-box;
}

body#observation .observation-panel-heading {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 18px;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--border);
}

body#observation .observation-panel-heading > .material-symbols-outlined {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    color: var(--primary);
    background: var(--primary-soft);
    border-radius: 50%;
    font-size: 20px;
}

body#observation .observation-panel-heading h3 {
    margin: 0;
    color: var(--text);
    font-size: 1.08rem;
}

body#observation .observation-panel-heading p {
    margin: 2px 0 0;
    color: var(--text-muted);
    font-size: .74rem;
}

body#observation .content .fieldsList {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

body#observation .content .fieldsList li {
    min-width: 0;
    margin: 0;
    padding: 14px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

body#observation .content .fieldsList li:last-child {
    margin: 0;
    padding: 14px;
    border: 1px solid var(--border);
}

body#observation .content .fieldsList li.image,
body#observation .content .fieldsList li.video,
body#observation .content .fieldsList li.audio,
body#observation .content .fieldsList li.field-grid-wide {
    grid-column: 1 / -1;
}

body#observation .content .fieldsList img,
body#observation .content .fieldsList video {
    display: block;
    width: 100%;
    max-height: 520px;
    margin: 8px 0 0;
    object-fit: contain;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
}

body#observation .content .fieldsList audio {
    width: 100%;
    margin-top: 8px;
}

body#observation .content .fieldsList span.key {
    margin: 0 0 5px;
    color: var(--text-muted);
    font-size: .7rem;
    letter-spacing: .06em;
}

body#observation .content .fieldsList span.value {
    margin: 0;
    color: var(--text);
    font-size: .94rem;
    overflow-wrap: anywhere;
}

body#observation .content .weatherInfo {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

body#observation .content .weatherInfo .weatherIcon {
    display: grid;
    width: 92px;
    height: 92px;
    place-items: center;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

body#observation .content .weatherInfo .weatherIcon img {
    width: 72px;
    height: 72px;
}

body#observation .content .weatherInfo .temperature {
    margin: 0 0 10px;
    color: var(--text);
    font-size: 1.7rem;
}

body#observation .content .weatherInfo .details {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

body#observation .content .weatherInfo .details > div {
    min-width: 0;
    padding: 9px 10px;
    background: var(--surface-1);
    border-radius: var(--radius-sm);
    font-size: .76rem;
}

body#observation #observationMapContainer {
    position: relative;
    z-index: 0;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

/* Leaflet usa z-index altos nas súas capas. A cabeceira precisa o seu propio
   nivel para que o menú de accións non quede agochado detrás do mapa. */
body#observation > section#content > header:not(.header) {
    z-index: 1100;
}

body#observation #observationMenu {
    z-index: 1200;
}

body#observation #observationMap {
    width: 100%;
    height: clamp(300px, 38vh, 460px);
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

body#observation #comments {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
}

body#observation #comments li {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 11px 13px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: none;
    font-style: normal;
}

body#observation #comments li img {
    margin: 0;
}

body#observation .commentPicture {
    width: 42px;
    height: 42px;
    border: 2px solid var(--surface);
    box-shadow: 0 0 0 1px var(--border);
}

body#observation #noCommentsYet {
    margin: 0;
    padding: 24px 16px;
    background: var(--surface-1);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
}

body#observation .observation-comment-slot {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

body#observation .observation-comment-slot:empty {
    display: none;
}

body#observation .observation-comment-composer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    width: 100%;
    align-items: center;
    gap: 8px;
}

body#observation .observation-comment-status {
    display: none;
    grid-column: 1 / -1;
    width: 100%;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: .78rem;
    line-height: 1.35;
}

body#observation .observation-comment-status:not(:empty) {
    display: block;
}

body#observation .observation-comment-status.is-sending {
    color: var(--text-muted);
    background: var(--surface-1);
    border-color: var(--border);
}

body#observation .observation-comment-status.is-success {
    color: var(--success-text);
    background: var(--success-bg);
    border-color: #cfe0d5;
}

body#observation .observation-comment-status.is-error {
    color: var(--danger-text);
    background: var(--danger-bg);
    border-color: #e8caca;
}

body#observation #comments li.is-new {
    animation: observation-comment-added .7s ease-out;
}

body#observation .observation-comment-send.is-sending .material-symbols-outlined {
    animation: observation-comment-spin .8s linear infinite;
}

@keyframes observation-comment-added {
    from { background: var(--success-bg); transform: translateY(5px); }
    to { background: var(--surface-1); transform: translateY(0); }
}

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

body#observation .observation-comment-composer #commentInput {
    width: 100%;
    min-width: 0;
    height: 42px;
    margin: 0;
    padding: 11px 14px;
    color: var(--text);
    background: var(--surface-1);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
}

body#observation .observation-comment-composer .observation-comment-send {
    display: inline-flex;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff;
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    font: inherit;
    font-weight: 650;
    cursor: pointer;
}

body#observation .observation-comment-composer .observation-comment-send:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

body#observation .observation-comment-composer .observation-comment-send .material-symbols-outlined {
    font-size: 19px;
}

body#observation .observation-comment-footer {
    display: none !important;
}

/* Observation dialogs and user-management confirmations */
body#observation .observation-action-dialog,
body#project :is(#confirmDelete, #confirmLeaveProject, #deleteProjectObservationPopup, #observationLinkCopiedPopup) .observation-action-dialog,
body#user #removeAccount .user-action-confirm-dialog,
body#userManagement .user-action-confirm-dialog {
    position: relative;
    display: flex;
    width: min(560px, 100%);
    max-width: 560px;
    height: auto;
    max-height: 92vh;
    flex-direction: column;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: var(--radius-lg) !important;
}

body#observation #exportObservation,
body#observation #deleteObservation,
body#observation #observationLinkCopiedPopup,
body#project :is(#confirmDelete, #confirmLeaveProject, #deleteProjectObservationPopup, #observationLinkCopiedPopup),
body#user #removeAccount,
body#userManagement .user-action-confirm {
    padding: clamp(12px, 3vw, 40px);
}

/* The mobile comment composer sits at z-index 1200. Observation dialogs must
   remain above that fixed action bar and use the visible mobile viewport. */
body#observation #exportObservation,
body#observation #deleteObservation,
body#observation #observationLinkCopiedPopup,
body#project :is(#confirmDelete, #confirmLeaveProject, #deleteProjectObservationPopup, #observationLinkCopiedPopup) {
    inset: 0;
    z-index: 2000;
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    box-sizing: border-box;
}

body#observation .observation-dialog-header,
body#project :is(#confirmDelete, #confirmLeaveProject, #deleteProjectObservationPopup, #observationLinkCopiedPopup) .observation-dialog-header,
body#user #removeAccount .user-action-confirm-header,
body#userManagement .user-action-confirm-header {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 20px 68px 20px 24px;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border);
}

body#observation .observation-dialog-header > .material-symbols-outlined,
body#project :is(#confirmDelete, #confirmLeaveProject, #deleteProjectObservationPopup, #observationLinkCopiedPopup) .observation-dialog-header > .material-symbols-outlined,
body#user #removeAccount .user-action-confirm-header > .material-symbols-outlined,
body#userManagement .user-action-confirm-header > .material-symbols-outlined {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    color: var(--primary);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 50%;
    font-size: 20px;
}

body#observation .observation-dialog-header.danger > .material-symbols-outlined,
body#project :is(#confirmDelete, #confirmLeaveProject, #deleteProjectObservationPopup, #observationLinkCopiedPopup) .observation-dialog-header.danger > .material-symbols-outlined,
body#user #removeAccount .user-action-confirm-header.danger > .material-symbols-outlined,
body#userManagement .user-action-confirm-header.danger > .material-symbols-outlined {
    color: var(--danger);
    background: var(--danger-bg);
    border-color: #e8caca;
}

body#observation .observation-dialog-header h2,
body#project :is(#confirmDelete, #confirmLeaveProject, #deleteProjectObservationPopup, #observationLinkCopiedPopup) .observation-dialog-header h2,
body#user #removeAccount .user-action-confirm-header h2,
body#userManagement .user-action-confirm-header h2 {
    margin: 0 0 2px;
    color: var(--text) !important;
    font-size: 1.08rem;
}

body#observation .observation-dialog-header p,
body#project :is(#confirmDelete, #confirmLeaveProject, #deleteProjectObservationPopup, #observationLinkCopiedPopup) .observation-dialog-header p,
body#user #removeAccount .user-action-confirm-header p,
body#userManagement .user-action-confirm-header p {
    margin: 0;
    color: var(--text-muted);
    font-size: .8rem;
    line-height: 1.4;
}

body#observation .observation-dialog-body,
body#user #removeAccount .user-action-confirm-body,
body#userManagement .user-action-confirm-body {
    overflow-y: auto;
    padding: 22px 24px;
}

body#observation .observation-dialog-body > p,
body#user #removeAccount .user-action-confirm-body > p,
body#userManagement .user-action-confirm-body > p {
    margin: 0;
    color: var(--text-muted);
    font-size: .88rem;
    line-height: 1.55;
}

body#userManagement .user-action-confirm-value {
    display: block;
    margin-top: 14px;
    padding: 11px 13px;
    overflow: hidden;
    color: var(--text);
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: .9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body#observation .observation-dialog-actions,
body#project :is(#confirmDelete, #confirmLeaveProject, #deleteProjectObservationPopup, #observationLinkCopiedPopup) .observation-dialog-actions,
body#user #removeAccount .user-action-confirm-actions,
body#userManagement .user-action-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 24px;
    background: var(--surface-1);
    border-top: 1px solid var(--border);
}

body#observation .observation-dialog-actions .button,
body#project :is(#confirmDelete, #confirmLeaveProject, #deleteProjectObservationPopup, #observationLinkCopiedPopup) .observation-dialog-actions .button,
body#user #removeAccount .user-action-confirm-actions .button,
body#userManagement .user-action-confirm-actions .button {
    display: inline-flex;
    width: auto;
    min-width: 112px;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0 !important;
    padding: 9px 14px !important;
    text-decoration: none;
}

body#observation .observation-action-dialog > .close,
body#project :is(#confirmDelete, #confirmLeaveProject, #deleteProjectObservationPopup, #observationLinkCopiedPopup) .observation-action-dialog > .close,
body#user #removeAccount .user-action-confirm-dialog > .close,
body#userManagement .user-action-confirm-dialog > .close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 34px;
    height: 34px;
    min-height: 34px;
    margin: 0;
    padding: 0;
    appearance: none;
    background-image: none !important;
    background-color: var(--surface) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 50%;
    z-index: 5;
}

body#observation .observation-action-dialog > .close::before,
body#observation .observation-action-dialog > .close::after,
body#project :is(#confirmDelete, #confirmLeaveProject, #deleteProjectObservationPopup, #observationLinkCopiedPopup) .observation-action-dialog > .close::before,
body#project :is(#confirmDelete, #confirmLeaveProject, #deleteProjectObservationPopup, #observationLinkCopiedPopup) .observation-action-dialog > .close::after,
body#user #removeAccount .user-action-confirm-dialog > .close::before,
body#user #removeAccount .user-action-confirm-dialog > .close::after,
body#userManagement .user-action-confirm-dialog > .close::before,
body#userManagement .user-action-confirm-dialog > .close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 2px;
    background: var(--text-soft);
    border-radius: 2px;
}

body#observation .observation-action-dialog > .close::before,
body#project :is(#confirmDelete, #confirmLeaveProject, #deleteProjectObservationPopup, #observationLinkCopiedPopup) .observation-action-dialog > .close::before,
body#user #removeAccount .user-action-confirm-dialog > .close::before,
body#userManagement .user-action-confirm-dialog > .close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

body#observation .observation-action-dialog > .close::after,
body#project :is(#confirmDelete, #confirmLeaveProject, #deleteProjectObservationPopup, #observationLinkCopiedPopup) .observation-action-dialog > .close::after,
body#user #removeAccount .user-action-confirm-dialog > .close::after,
body#userManagement .user-action-confirm-dialog > .close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

body#observation #exportObservation .export_type {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 18px 0 0;
    padding: 0;
}

body#observation #exportObservation .export_type li {
    margin: 0;
    padding: 0;
}

body#observation #exportObservation .export_type a {
    display: grid;
    min-height: 92px;
    place-items: center;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

body#observation #exportObservation .export_type img {
    width: 52px;
    margin: 0;
}

@media (max-width: 959px) {
    body#observation main.observation-detail-layout {
        --observation-panel-padding: 12px;
        --observation-section-gap: 8px;
        display: block;
        padding: 6px 6px 12px;
    }

    body#observation .observation-summary-card {
        position: static;
        margin-bottom: 8px;
        border-radius: var(--radius-md);
    }

    body#observation .observation-summary-card .topPicture {
        height: 170px;
    }

    body#observation .observation-summary-content {
        padding: 22px 14px 14px;
    }

    body#observation .observation-summary-content h1 {
        margin-bottom: 18px;
    }

    body#observation main .content.observation-detail-sections {
        gap: var(--observation-section-gap);
        padding: 0 !important;
    }

    body#observation .observation-panel {
        padding: var(--observation-panel-padding);
        border-radius: var(--radius-md);
    }

    body#observation .observation-panel-heading {
        margin: 0 0 12px;
        padding: 0 0 11px;
    }

    body#observation #observationMap {
        height: 290px;
    }

    body#observation footer.right {
        gap: 6px;
        padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
    }

    body#observation .observation-comment-footer.has-composer {
        display: flex !important;
    }

    body#observation .observation-comment-footer .observation-comment-composer {
        width: 100%;
    }

    body#observation .observation-comment-composer .observation-comment-send {
        width: 42px;
        min-width: 42px;
    }
}

@media (max-width: 600px) {
    body#observation .content .weatherInfo {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 12px;
    }

    body#observation .content .weatherInfo .weatherIcon {
        width: 72px;
        height: 72px;
    }

    body#observation .content .weatherInfo .weatherIcon img {
        width: 58px;
        height: 58px;
    }

    body#observation .content .weatherInfo .details {
        grid-template-columns: 1fr;
    }

    body#observation #exportObservation,
    body#observation #deleteObservation,
    body#observation #observationLinkCopiedPopup,
    body#project :is(#confirmDelete, #confirmLeaveProject, #deleteProjectObservationPopup, #observationLinkCopiedPopup) {
        align-items: center;
        padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
    }

    body#user #removeAccount,
    body#userManagement .user-action-confirm {
        align-items: flex-end;
        padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
    }

    body#observation .observation-action-dialog,
    body#project :is(#confirmDelete, #confirmLeaveProject, #deleteProjectObservationPopup, #observationLinkCopiedPopup) .observation-action-dialog,
    body#user #removeAccount .user-action-confirm-dialog,
    body#userManagement .user-action-confirm-dialog {
        width: 100%;
        border-radius: var(--radius-md) !important;
    }

    body#observation .observation-dialog-header,
    body#project :is(#confirmDelete, #confirmLeaveProject, #deleteProjectObservationPopup, #observationLinkCopiedPopup) .observation-dialog-header,
    body#user #removeAccount .user-action-confirm-header,
    body#userManagement .user-action-confirm-header {
        padding: 16px 58px 16px 16px;
    }

    body#observation .observation-dialog-body,
    body#user #removeAccount .user-action-confirm-body,
    body#userManagement .user-action-confirm-body {
        padding: 18px 16px;
    }

    body#observation .observation-dialog-actions,
    body#project :is(#confirmDelete, #confirmLeaveProject, #deleteProjectObservationPopup, #observationLinkCopiedPopup) .observation-dialog-actions,
    body#user #removeAccount .user-action-confirm-actions,
    body#userManagement .user-action-confirm-actions {
        padding: 12px 16px;
    }

    body#observation .observation-dialog-actions .button,
    body#project :is(#confirmDelete, #confirmLeaveProject, #deleteProjectObservationPopup, #observationLinkCopiedPopup) .observation-dialog-actions .button,
    body#user #removeAccount .user-action-confirm-actions .button,
    body#userManagement .user-action-confirm-actions .button {
        min-width: 0;
        flex: 1 1 0;
    }
}

/* Mobile two-column workspaces — one shared horizontal gutter.
   Nota: 18px para casar coa regra shell (main > .content), que é a que
   realmente gaña en project/topic/user; aquí só chega a aplicarse en
   body#newTopic (editTopic/editProject/newTopic). */
@media (max-width: 959px) {
    body#project .content.topic-editor,
    body#topic .content.topic-view-editor,
    body#newTopic main .content.topic-editor:not(.is-creation-flow),
    body#user .content.topic-editor {
        width: 100% !important;
        max-width: none !important;
        padding: 18px !important;
        box-sizing: border-box !important;
    }

    body#project .content.topic-editor > .project-info-card,
    body#project .content.topic-editor > .topic-fields-section,
    body#topic .content.topic-view-editor > .topic-info-card,
    body#topic .content.topic-view-editor > .topic-view-sections,
    body#newTopic main .content.topic-editor:not(.is-creation-flow) > .topic-form-card,
    body#newTopic main .content.topic-editor:not(.is-creation-flow) > .topic-fields-section,
    body#user .content.topic-editor > .user-profile-card,
    body#user .content.topic-editor > .topic-fields-section {
        width: 100% !important;
        max-width: none !important;
        margin: 0 0 8px !important;
        box-sizing: border-box !important;
    }

    body#project .content.topic-editor > .topic-fields-section,
    body#topic .content.topic-view-editor > .topic-view-sections,
    body#newTopic main .content.topic-editor:not(.is-creation-flow) > .topic-fields-section,
    body#user .content.topic-editor > .topic-fields-section {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    body#user #projectsList {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
}

/* =========================================================
   Harmonization pass — shared informational notes, footers
   and detail imagery
   ========================================================= */

/* Informational notes: flat tinted pill instead of the legacy
   aliceblue box with a PNG icon. */
.info {
    padding: 12px 14px;
    color: var(--info);
    background-color: var(--info-bg);
    background-image: none;
    border: 1px solid #cfdce5;
    border-radius: var(--radius-md);
    font-size: .84rem;
    line-height: 1.5;
}

/* Contexts that use .info as a bare hint, not a boxed note. */
#customMapSource .info,
.project-map-section .info,
.csv-upload-guidance .info,
.observation-confirm-body .info {
    padding: 0;
    color: var(--text-muted);
    background: transparent;
    border: 0;
}

/* Action footers: keep the primary action off the screen edge. */
footer.right,
footer.spaceBetween {
    padding-inline: clamp(14px, 3vw, 42px) !important;
}

/* Topic detail reuses the upload-preview element to display the
   image; there it is not a dropzone, so no dashed affordance. */
body#topic .topic-form-media .custom-file-upload { cursor: default; }
body#topic .topic-image-preview {
    border: 1px solid var(--border) !important;
}

/* =========================================================================
   DEPTH & MODERNIZATION LAYER — "verde con profundidad"
   Capa engadida ao final para gañar a cascada. Non substitúe o sistema
   formal: dálle profundidade (degradados sutiles, sombras tinguidas de
   verde, acentos de cor) para romper a monotonía mantendo a marca CESGA.
   ========================================================================= */
:root {
    /* Degradados de marca */
    --gradient-primary: linear-gradient(145deg, var(--primary-light) 0%, var(--primary) 55%, var(--primary-dark) 100%);
    --gradient-primary-hover: linear-gradient(145deg, var(--primary) 0%, var(--primary-dark) 100%);
    --gradient-accent: linear-gradient(90deg, var(--accent) 0%, var(--peneira-cyan) 100%);
    --gradient-brand-text: linear-gradient(120deg, var(--primary-dark) 0%, var(--primary-light) 45%, var(--accent-dark) 100%);
    --gradient-danger: linear-gradient(145deg, #c25b5b 0%, var(--danger) 60%, var(--danger-dark) 100%);

    /* Sombras tinguidas de verde (máis cálidas e cohesivas que o negro puro) */
    --shadow-brand-sm: 0 2px 8px rgba(12, 61, 54, .10);
    --shadow-brand-md: 0 8px 22px rgba(12, 61, 54, .14);
    --shadow-brand-lg: 0 18px 44px rgba(12, 61, 54, .18);
    --shadow-btn: 0 3px 10px rgba(9, 63, 55, .26), inset 0 1px 0 rgba(255, 255, 255, .14);
    --shadow-btn-hover: 0 8px 20px rgba(9, 63, 55, .30), inset 0 1px 0 rgba(255, 255, 255, .12);
}

/* --- Fondo ambiental: leve baño de luz verde/cian en vez de gris plano --- */
html {
    background:
        radial-gradient(1100px 620px at 100% -8%, rgba(0, 200, 166, .10), transparent 58%),
        radial-gradient(900px 560px at -8% 108%, rgba(90, 165, 186, .12), transparent 55%),
        #eef1f2 !important;
    background-attachment: fixed !important;
}

body {
    background:
        radial-gradient(1100px 620px at 100% -8%, rgba(0, 200, 166, .10), transparent 58%),
        radial-gradient(900px 560px at -8% 108%, rgba(90, 165, 186, .12), transparent 55%),
        var(--light) !important;
    background-attachment: fixed !important;
}

/* Páxinas con fondo propio: mesma atmosfera tinguida */
body.error {
    background:
        radial-gradient(1100px 640px at 100% -10%, rgba(0, 200, 166, .14), transparent 58%),
        radial-gradient(920px 560px at -6% 110%, rgba(90, 165, 186, .16), transparent 55%),
        #eaeef0 !important;
    background-attachment: fixed !important;
}

/* Login: imaxe da comunidade tinguida cos gradientes de marca */
body#login {
    background:
        radial-gradient(1100px 640px at 100% -10%, rgba(0, 200, 166, .14), transparent 58%),
        radial-gradient(920px 560px at -6% 110%, rgba(90, 165, 186, .16), transparent 55%),
        url('../img/community_bg.png') center / cover no-repeat,
        #eaeef0 !important;
    background-attachment: fixed !important;
}

/* --- Botóns primarios: recheo con degradado + sombra tinguida + elevación --- */
button:not(.secondary):not(.cancel):not(.danger):not(.warning):not(.deny):not(.ghost):not(.user-icon-action):not(.close):not(.link):not(.tab-btn):not(.field-card-action):not(.ql-picker):not(.toastui-editor-toolbar-icons):not([class^="ql-"]),
.button:not(.secondary):not(.cancel):not(.danger):not(.warning):not(.deny):not(.ghost):not(.link),
input[type="button"]:not(.secondary):not(.cancel),
input[type="submit"],
.nextFieldButton {
    background: var(--gradient-primary) !important;
    border-color: var(--primary-dark) !important;
    box-shadow: var(--shadow-btn) !important;
}

button:not(.secondary):not(.cancel):not(.danger):not(.warning):not(.deny):not(.ghost):not(.user-icon-action):not(.close):not(.link):not(.tab-btn):not(.field-card-action):not(.ql-picker):not(.toastui-editor-toolbar-icons):not([class^="ql-"]):hover,
.button:not(.secondary):not(.cancel):not(.danger):not(.warning):not(.deny):not(.ghost):not(.link):hover,
input[type="submit"]:hover,
.nextFieldButton:hover {
    background: var(--gradient-primary-hover) !important;
    border-color: var(--primary-dark) !important;
    box-shadow: var(--shadow-btn-hover) !important;
    transform: translateY(-1px);
}

button:not(.secondary):not(.cancel):not(.danger):not(.warning):not(.deny):not(.ghost):not(.link):not(.tab-btn):not(.field-card-action):not(.ql-picker):not(.toastui-editor-toolbar-icons):not([class^="ql-"]):active,
.button:not(.secondary):not(.cancel):not(.danger):not(.warning):not(.deny):not(.ghost):not(.link):not(.tab-btn):not(.field-card-action):active {
    transform: translateY(0);
    box-shadow: var(--shadow-btn) !important;
}

/* Botóns de perigo: mesmo tratamento con degradado vermello */
button.danger,
.button.danger,
button.warning:not(.secondary) {
    background: var(--gradient-danger) !important;
    border-color: var(--danger-dark) !important;
    box-shadow: 0 3px 10px rgba(122, 48, 48, .26), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}

button.danger:hover,
.button.danger:hover {
    filter: brightness(1.05);
    box-shadow: 0 8px 20px rgba(122, 48, 48, .30) !important;
    transform: translateY(-1px);
}

/* Botóns secundarios: sutil elevación ao pasar o rato */
button.secondary:hover,
.button.secondary:hover,
.button.cancel:hover,
button.cancel:hover {
    border-color: var(--primary-light) !important;
    box-shadow: var(--shadow-brand-sm) !important;
    transform: translateY(-1px);
}

/* --- Tarxetas: sombra tinguida + barra de acento animada ao hover --- */
.card,
.project,
.topic,
.modelContainer,
.myObservation,
.info-card,
.stat-item {
    box-shadow: var(--shadow-brand-sm) !important;
}

.project,
.topic,
.modelContainer,
.myObservation {
    position: relative;
}

.project::before,
.topic::before,
.modelContainer::before,
.myObservation::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-accent);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s ease;
    pointer-events: none;
    z-index: 1;
}

.project:hover,
.topic:hover,
.modelContainer:hover,
.myObservation:hover {
    box-shadow: var(--shadow-brand-md) !important;
    transform: translateY(-3px);
}

.project:hover::before,
.topic:hover::before,
.modelContainer:hover::before,
.myObservation:hover::before {
    transform: scaleX(1);
}

/* --- Cabeceira: barra de app verde de marca (coma o theme-color da PWA) --- */
body section.header,
header:not(.header):not(.community-header) {
    position: relative;
    color: #fff !important;
    background: linear-gradient(120deg, var(--primary-dark) 0%, var(--primary) 68%, #17685b 100%) !important;
    border-bottom: 0 !important;
    border-image: none !important;
    box-shadow: 0 4px 16px rgba(9, 63, 55, .18) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Fío de acento na base da cabeceira */
body section.header::after,
header:not(.header):not(.community-header)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--gradient-accent);
    pointer-events: none;
}

/* Título e iconas en branco */
body section.header .title,
header:not(.header) .title,
header:not(.header) h1,
header:not(.header) h2,
header:not(.header) h3,
body:not(.admin):not(#community) header > .tools > span:not(.material-symbols-outlined) {
    color: #fff !important;
}

body section.header .material-symbols-outlined,
header:not(.header) > .tools .material-symbols-outlined {
    color: #fff !important;
}

header:not(.header) > .tools .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background .15s ease;
}

header:not(.header) > .tools .icon:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, .16);
}

/* Os menús despregables dentro da cabeceira manteñen o seu esquema claro */
header:not(.header) .menu,
header:not(.header) .menu li {
    color: var(--dark) !important;
}

header:not(.header) .menu .material-symbols-outlined {
    color: var(--primary) !important;
}

/* Leaflet sitúa os seus controis en z-index 1000. Na vista de mapa a
   cabeceira debe crear unha capa superior para que o menú non quede oculto. */
body.map-page > #content > header:not(.header) {
    z-index: 1100 !important;
}

/* --- Escritorio: barra de ferramentas fina en vez da barra de app verde.
   Frecha atrás + título de páxina á esquerda (estilo breadcrumb), accións á
   dereita, sobre unha superficie branca discreta cun fío inferior. En móbil
   mantense a barra verde de marca. --- */
@media (min-width: 960px) {
    body:not(.admin):not(#community) > #content > header:not(.header),
    body:not(.admin):not(#community) > section#content > header:not(.header) {
        height: 56px !important;
        color: var(--text) !important;
        background: rgba(255, 255, 255, .92) !important;
        border-bottom: 1px solid var(--border) !important;
        box-shadow: none !important;
        backdrop-filter: saturate(180%) blur(14px);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
    }

    body:not(.admin):not(#community) > #content,
    body:not(.admin):not(#community) > section#content {
        grid-template-rows: 56px minmax(0, 1fr) auto;
    }

    body:not(.admin):not(#community) header:not(.header)::after {
        display: none;
    }

    /* Frecha + título xuntos á esquerda; accións á dereita */
    body:not(.admin):not(#community) header:not(.header) > .tools {
        justify-content: flex-start;
        gap: 6px;
        max-width: 1760px;
        padding-inline: clamp(20px, 2.5vw, 40px);
    }

    body:not(.admin):not(#community) header:not(.header) > .tools > span:not(.material-symbols-outlined) {
        overflow: hidden;
        color: var(--primary-dark) !important;
        font-size: 1.02rem;
        font-weight: 650;
        letter-spacing: -.01em;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    body:not(.admin):not(#community) header:not(.header) > .tools > .right {
        margin-left: auto;
    }

    body:not(.admin):not(#community) header:not(.header) > .tools .material-symbols-outlined {
        color: var(--primary-dark) !important;
    }

    body:not(.admin):not(#community) header:not(.header) > .tools .icon:hover {
        color: var(--primary-dark) !important;
        background: var(--primary-soft);
    }

}

/* --- Footer móbil do dashboard: 2 + FAB central + 2, sen icona de admin --- */
@media (max-width: 959px) {
    body#user footer.fixed .iconGroup.left .footerIcon:nth-child(3) { order: 5; }
    body#user footer.fixed .iconGroup.left .footerIcon:nth-child(4) { order: 6; }
    body#user footer.fixed .iconGroup.right { display: none !important; }
}

/* --- Login: barra de acento superior + logotipo con degradado --- */
body#login #wrapper {
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-brand-lg) !important;
}

body#login #wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--gradient-accent);
}

body#login .logo h1,
body#landing .hero-text h1,
body#landing h1 {
    background: var(--gradient-brand-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--primary-dark) !important;
}

/* --- Login móbil: foto da comunidade a pantalla completa + tarxeta glass --- */
@media (max-width: 600px) {
    body#login {
        padding: max(12px, env(safe-area-inset-top)) 16px calc(env(safe-area-inset-bottom) + 66px) !important;
        /* Encadrar a foto no lado da xente (capas: 2 gradientes + foto) */
        background-position: center, center, 70% center !important;
    }

    body#login #wrapper {
        width: 100% !important;
        margin: auto !important;
        padding: 24px 22px 18px;
        background: rgba(255, 255, 255, .74) !important;
        backdrop-filter: blur(22px) saturate(170%);
        -webkit-backdrop-filter: blur(22px) saturate(170%);
        border: 1px solid rgba(255, 255, 255, .65) !important;
        box-shadow: var(--shadow-brand-lg) !important;
    }

    body#login .logo {
        margin: 0 0 8px !important;
    }

    body#login .login-logo {
        width: clamp(136px, 38vw, 170px);
        height: clamp(136px, 38vw, 170px);
        margin: 0 auto;
    }

    /* Compactar o formulario: fóra marxes herdadas e alturas fantasma */
    body#login #form {
        margin: 0 !important;
    }

    body#login #loginForm {
        height: auto !important;
        margin: 0 !important;
    }

    body#login form label {
        margin-top: 4px !important;
        font-size: .78rem;
        font-weight: 600;
    }

    /* As etiquetas xa nomean o campo: sen placeholder duplicado */
    body#login #loginForm input::placeholder {
        color: transparent;
        opacity: 0;
    }

    body#login form input {
        background: rgba(255, 255, 255, .88);
    }

    body#login form .buttons {
        margin: 0;
    }

    body#login form button {
        margin: 8px 0 6px;
    }

    body#login #loginForm {
        gap: 3px;
    }

    body#login #loginForm input {
        height: 44px;
        margin: 3px 0 8px !important;
    }

    body#login .login-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2px 14px;
        margin-top: 2px;
    }

    body#login .login-links .link {
        margin: 2px 0;
        font-size: .78rem;
        line-height: 1.35;
    }

    body#login .login-links #privacy {
        flex-basis: 100%;
    }

    body#login footer {
        bottom: max(14px, env(safe-area-inset-bottom)) !important;
        right: 50% !important;
        transform: translateX(50%);
    }
}

/* O logo institucional necesita unha superficie estable sobre a fotografía. */
body#login footer {
    padding: 5px 12px;
    background: rgba(255, 255, 255, .78) !important;
    border: 1px solid rgba(255, 255, 255, .72) !important;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(12, 61, 54, .14);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
}

body#login footer img.cesga {
    display: block;
    width: 112px;
    height: 28px !important;
    margin: 0;
    padding: 0 !important;
    opacity: 1;
}

body#login .login-links a {
    color: inherit;
    text-decoration: none;
}

@media (max-height: 700px) and (max-width: 600px) {
    body#login #wrapper {
        padding-block: 18px 14px;
    }

    body#login .login-logo {
        width: 128px;
        height: 128px;
    }

    body#login .logo {
        margin-bottom: 3px !important;
    }
}

/* Login móbil inspirado na composición vertical da identidade Peneira. */
body#login .login-field {
    width: 100%;
}

body#login .login-field label {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    column-gap: 8px;
    min-height: 24px;
    line-height: 1.25;
}

body#login .login-field label .material-symbols-outlined {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    color: var(--primary);
    font-size: 21px;
    line-height: 1;
}

body#login .password-field {
    position: relative;
    width: 100%;
}

body#login .password-field input {
    padding-right: 48px;
}

body#login .password-toggle {
    position: absolute;
    top: 23px;
    right: 5px;
    display: grid !important;
    place-items: center;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--primary) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    transform: translateY(-50%) !important;
    appearance: none;
    -webkit-appearance: none;
}

body#login .password-toggle .material-symbols-outlined {
    display: block;
    width: 24px;
    height: 24px;
    font-size: 24px;
    line-height: 24px;
}

body#login .password-toggle:hover,
body#login .password-toggle:active,
body#login .password-toggle[aria-pressed="true"] {
    color: var(--primary-dark) !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: translateY(-50%) !important;
}

body#login .password-toggle:focus {
    outline: none;
}

body#login .password-toggle:focus-visible {
    outline: 2px solid rgba(18, 88, 77, .35);
    outline-offset: -4px;
}

body#login .login-links {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
}

body#login .login-link {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    justify-content: flex-start;
    column-gap: 8px;
    width: min(100%, 240px) !important;
    min-width: 0;
    max-width: 100%;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 1px 0 !important;
    color: var(--primary-dark) !important;
    font-family: inherit;
    font-size: .88rem;
    font-weight: 400 !important;
    font-style: normal;
    text-align: left;
    text-transform: none !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    overflow-wrap: anywhere;
}

body#login .login-link .material-symbols-outlined {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    color: var(--primary);
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
}

body#login .login-link:hover,
body#login .login-link:active,
body#login .login-link:visited {
    color: var(--primary-dark) !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

body#login .login-link:focus-visible {
    border-radius: 4px;
    outline: 2px solid rgba(18, 88, 77, .35);
    outline-offset: 3px;
}

body#login .cesga-prefix {
    display: none;
    color: var(--text-muted);
    font-size: .76rem;
    white-space: nowrap;
}

/* Diálogos de acceso: mesmo patrón visual que os popups actuais da app. */
body#login .popup {
    padding: 18px;
}

body#login .popup #content.login-dialog {
    position: relative;
    display: flex;
    width: min(540px, 100%);
    max-width: 540px;
    height: auto;
    max-height: min(90dvh, 760px);
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-xl) !important;
}

body#login .popup #content.login-dialog-compact {
    max-width: 460px;
}

body#login .login-dialog-header {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 20px 26px;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border);
}

body#login .login-dialog-header > div {
    min-width: 0;
    padding-right: 38px;
}

body#login .login-dialog-header-icon {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    color: var(--primary);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 50%;
    font-size: 22px;
}

body#login .login-dialog-header .title {
    margin: 0 0 2px;
    color: var(--text) !important;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: left !important;
}

body#login .login-dialog-header p:last-child {
    margin: 0;
    color: var(--text-muted);
    font-size: .8rem;
    line-height: 1.4;
}

body#login .popup #content.login-dialog > .close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 34px;
    height: 34px;
    min-height: 34px;
    margin: 0;
    padding: 0;
    appearance: none;
    background-image: none !important;
    background-color: var(--surface) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 50%;
    z-index: 6;
}

body#login .popup #content.login-dialog > .close::before,
body#login .popup #content.login-dialog > .close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 2px;
    background: var(--text-soft);
    border-radius: 2px;
}

body#login .popup #content.login-dialog > .close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

body#login .popup #content.login-dialog > .close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

body#login .login-dialog-form {
    display: flex;
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 0;
}

body#login .popup #content .login-dialog-body {
    position: static;
    inset: auto;
    display: flex;
    width: 100%;
    height: auto;
    min-height: 0;
    flex: 1 1 auto;
    align-items: stretch;
    overflow-y: auto;
    padding: 22px 26px;
}

body#login .login-dialog-body label {
    margin: 10px 0 5px;
    color: var(--text-soft) !important;
    font-size: .84rem;
    font-weight: 650;
}

body#login .login-dialog-body input,
body#login .login-dialog-body textarea {
    width: 100%;
    margin: 0 !important;
    padding: 11px 13px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
}

body#login .login-dialog-body input {
    height: 44px;
}

body#login .login-dialog-body textarea {
    min-height: 96px;
    resize: vertical;
}

body#login .login-dialog-body input:focus,
body#login .login-dialog-body textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(18, 88, 77, .13);
}

body#login .login-dialog-body .tip {
    margin: 3px 0 6px;
    font-size: .75rem;
    line-height: 1.35;
}

body#login .login-dialog-info {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 4px;
    padding: 10px 12px;
    color: var(--primary-dark);
    font-size: .8rem;
    line-height: 1.4;
    background: var(--primary-soft);
    border: 1px solid rgba(18, 88, 77, .14);
    border-radius: var(--radius-md);
}

body#login .login-dialog-info .material-symbols-outlined {
    flex: 0 0 auto;
    font-size: 19px;
}

body#login .login-dialog-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 26px 18px;
    background: var(--surface);
    border-top: 1px solid var(--border);
}

body#login .login-dialog-actions .button {
    width: auto;
    min-height: 42px;
    margin: 0;
    padding: 10px 16px;
    border-radius: var(--radius-md);
    text-transform: none;
}

body#login .login-dialog-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

body#login .login-dialog-submit .material-symbols-outlined {
    font-size: 18px;
}

body#login .login-dialog-actions #sendingHelper {
    width: auto;
    margin-right: auto;
    font-size: .78rem;
    text-transform: none;
}

@media (max-width: 600px) {
    body#login .popup {
        padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
    }

    body#login .popup #content.login-dialog {
        width: 100%;
        max-height: calc(100dvh - 24px);
        border-radius: 22px !important;
    }

    body#login .login-dialog-header {
        padding: 16px 18px;
    }

    body#login .login-dialog-header > div {
        padding-right: 32px;
    }

    body#login .popup #content.login-dialog > .close {
        top: 16px;
        right: 16px;
    }

    body#login .popup #content .login-dialog-body {
        padding: 16px 18px;
    }

    body#login .login-dialog-actions {
        padding: 12px 18px 16px;
    }

    body#login .login-dialog-actions .button {
        min-width: 0;
        padding-inline: 13px;
        font-size: .84rem;
    }
}

@media (min-width: 601px) {
    body#login #wrapper {
        overflow: visible;
    }

    body#login #wrapper::before {
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }
}

@media (max-width: 600px) {
    body#login {
        align-items: center !important;
        justify-content: center !important;
        padding: max(12px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom)) !important;
        background-position: center, center, 66% center !important;
    }

    body#login #wrapper {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100% !important;
        max-width: 420px;
        max-height: calc(100dvh - 24px);
        margin: auto !important;
        padding: clamp(18px, 4vh, 34px) 22px 14px;
        overflow-y: auto;
        border-radius: 36px;
        background: rgba(255, 255, 255, .88) !important;
        border-color: rgba(255, 255, 255, .82) !important;
        backdrop-filter: blur(18px) saturate(135%);
        -webkit-backdrop-filter: blur(18px) saturate(135%);
        scrollbar-width: none;
    }

    body#login #wrapper::-webkit-scrollbar {
        display: none;
    }

    body#login #wrapper::before {
        height: 0;
    }

    body#login .logo {
        margin: 0 0 clamp(8px, 2vh, 18px) !important;
    }

    body#login .login-logo {
        width: clamp(126px, 38vw, 164px);
        height: clamp(126px, 38vw, 164px);
        margin: 0 auto;
        padding: 0;
        mix-blend-mode: multiply;
    }

    body#login #loginForm {
        gap: 0;
    }

    body#login #loginForm label {
        margin: 0 0 5px !important;
        color: #3c515a !important;
        font-size: .88rem;
        font-weight: 500;
    }

    body#login #loginForm input {
        height: 46px;
        margin: 0 0 13px !important;
        padding-inline: 14px;
        color: var(--text);
        background: rgba(255, 255, 255, .82);
        border-color: rgba(99, 119, 128, .35);
        border-radius: 12px;
    }

    body#login #loginForm input::placeholder {
        color: #8997a1;
        opacity: 1;
    }

    body#login .password-field input {
        padding-right: 48px;
    }

    body#login .password-toggle {
        top: 23px;
    }

    body#login #loginForm .buttons {
        margin: 2px 0 8px;
    }

    body#login #loginForm #loginButton {
        height: 48px;
        margin: 0;
        border-radius: 12px;
        text-transform: none;
        font-size: 1.05rem;
        box-shadow: 0 8px 18px rgba(9, 63, 55, .24) !important;
    }

    body#login .login-links {
        flex-wrap: nowrap;
        gap: 1px;
        margin: 0;
    }

    body#login .login-link {
        width: min(100%, 230px) !important;
        min-width: 0;
        flex-basis: auto !important;
        padding: 3px 0 !important;
        font-size: .82rem;
        line-height: 1.25;
    }

    body#login .login-links #privacy {
        flex-basis: auto !important;
        width: min(100%, 230px) !important;
    }

    body#login footer {
        position: static;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        margin: 9px 0 0 !important;
        padding: 10px 0 0;
        transform: none;
        background: transparent !important;
        border: 0 !important;
        border-top: 1px solid rgba(18, 88, 77, .12) !important;
        border-radius: 0;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    body#login footer img.cesga {
        width: 104px;
        height: 26px !important;
    }

    body#login .cesga-prefix {
        display: inline;
    }
}

@media (max-width: 600px) and (max-height: 700px) {
    body#login #wrapper {
        padding: 14px 20px 10px;
        border-radius: 28px;
    }

    body#login .login-logo {
        width: 104px;
        height: 104px;
    }

    body#login .logo {
        margin-bottom: 4px !important;
    }

    body#login #loginForm label {
        margin-bottom: 3px !important;
        font-size: .8rem;
    }

    body#login #loginForm input {
        height: 42px;
        margin-bottom: 8px !important;
    }

    body#login .password-toggle {
        top: 21px;
    }

    body#login #loginForm #loginButton {
        height: 44px;
    }

    body#login .login-link {
        padding-block: 2px !important;
        font-size: .77rem;
    }

    body#login footer {
        margin-top: 5px !important;
        padding-top: 6px;
    }
}

/* =========================================================
   Chat (privado e de grupo) — mesmo sistema visual que a app
   ========================================================= */
/* A subcabeceira repite o nome que xa está na barra superior */
body#chat #chatUser {
    display: none;
}

/* Nota: dous ids no selector para superar os :not(#community) da app-shell */
body#chat #content main > .content {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
    padding: 0 !important;
}

body#chat section#chat {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 100%;
}

body#chat .messagesWrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    max-width: 900px;
    margin: 0 auto !important;
    padding: 18px clamp(14px, 4vw, 28px);
}

/* As mensaxes ancoran abaixo, xunto ao composer (como calquera app de chat) */
body#chat #messageList {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    margin: auto 0 0;
    padding: 0;
}

body#chat #messageList li {
    display: flex;
    justify-content: flex-start;
}

/* Burbulla base (peer no chat privado + calquera burbulla simple) */
body#chat #messageList li > span:not(.chatLine) {
    width: auto;
    max-width: 78%;
    margin: 0 !important;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px 16px 16px 16px;
    box-shadow: 0 1px 2px rgba(12, 61, 54, .06);
    color: var(--text);
    line-height: 1.4;
    text-align: left;
    overflow-wrap: anywhere;
}

/* Burbullas propias: verde de marca, á dereita */
body#chat #messageList li.own {
    justify-content: flex-end;
}

body#chat #messageList li.own > span {
    background: var(--gradient-primary, var(--primary));
    border-color: transparent;
    border-radius: 16px 4px 16px 16px;
    box-shadow: var(--shadow-brand-sm);
    color: #fff;
}

/* Aviso do sistema, centrado */
body#chat #messageList li.system-warning {
    justify-content: center;
}

body#chat #messageList li.system-warning > span {
    max-width: 100%;
    width: calc(100% - 8px);
    border-radius: 12px;
}

/* Chat de grupo: fila con avatar + nome do remitente */
body#chat #messageList li > span.chatLine {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    max-width: 82%;
    margin: 0 !important;
    padding: 0 !important;
    background: none;
    border: 0;
    box-shadow: none;
}

body#chat .chatAvatar {
    width: 34px;
    height: 34px;
    border: 0;
    box-shadow: 0 1px 3px rgba(12, 61, 54, .18);
    flex: 0 0 auto;
}

body#chat .chatMessage {
    padding: 8px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px 16px 16px 16px;
    box-shadow: 0 1px 2px rgba(12, 61, 54, .06);
    color: var(--text);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

body#chat .chatUserName {
    display: block;
    margin-bottom: 2px;
    color: var(--primary);
    font-style: normal;
    font-size: .76rem;
    font-weight: 700;
}

/* Composer inferior, con estilo de app */
body#chat footer {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 860px;
    height: auto;
    margin-inline: auto;
    padding: 12px clamp(12px, 4vw, 24px) calc(env(safe-area-inset-bottom) + 12px);
    background: var(--surface);
    border-top: 1px solid var(--border);
}

body#chat footer #commentInput {
    flex: 1;
    min-width: 0;
    min-height: 46px;
    margin: 0;
    padding: 11px 18px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-size: .95rem;
}

body#chat footer #commentInput:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--surface);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

body#chat footer #sendComment {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    height: 46px;
    padding: 0 20px;
    background: var(--gradient-primary, var(--primary));
    border-radius: 999px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-brand-sm);
    transition: box-shadow .15s ease, transform .05s ease;
}

body#chat footer #sendComment:hover {
    box-shadow: var(--shadow-brand-md);
}

body#chat footer #sendComment:active {
    transform: translateY(1px);
}

body#chat footer #sendComment .material-symbols-outlined {
    font-size: 20px;
}

/* Escritorio: ventá de conversa en tarxeta centrada (sen mar de branco) */
@media (min-width: 960px) {
    body#chat > #content,
    body#chat > section#content {
        background: var(--light) !important;
    }

    body#chat main {
        padding: 24px clamp(24px, 4vw, 48px) 0 !important;
    }

    body#chat section#chat {
        width: 100%;
        max-width: 860px;
        margin: 0 auto;
        background: var(--surface);
        border: 1px solid var(--border);
        border-bottom: 0;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        box-shadow: var(--shadow-brand-sm);
        overflow: hidden;
    }

    /* Cabeceira da tarxeta: avatar + nome da conversa */
    body#chat #chatUser {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 20px;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
    }

    body#chat #chatUser img {
        width: 40px;
        height: 40px;
        margin: 0;
    }

    body#chat #chatUser h3 {
        color: var(--primary-dark);
        font-size: 1rem;
    }

    /* Área de mensaxes co seu propio fondo, dentro da tarxeta */
    body#chat .messagesWrapper {
        max-width: none;
        padding: 20px 24px;
        background: var(--surface-1);
    }

    /* Composer pechando a tarxeta (selector forte para superar a app-shell) */
    body#chat.flex > #content > footer:not(.fixed),
    body#chat.flex > section#content > footer:not(.fixed) {
        width: 100% !important;
        max-width: 860px !important;
        margin: 0 auto 24px;
        border: 1px solid var(--border);
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
        box-shadow: var(--shadow-brand-sm);
    }
}

/* Marca de cabeceira do landing sen degradado (mantén lexibilidade) */
body#landing header h1,
body#landing .header h1 {
    -webkit-text-fill-color: currentColor;
    background: none;
    color: var(--primary-dark) !important;
}

/* --- Acentos de cor puntuais para romper a monotonía --- */
.link.accent,
.topic-section-kicker,
.status-badge.accent {
    color: var(--accent-dark) !important;
}

/* FAB con degradado de marca */
footer.fixed .fab span,
.fab .material-symbols-outlined {
    background: var(--gradient-primary) !important;
    box-shadow: var(--shadow-brand-md) !important;
}

/* --- Admin: pestanas lexibles (pílula activa) + tarxetas de estatísticas --- */
body.admin .tab-navigation {
    gap: 4px;
    padding: 10px !important;
    border-radius: var(--radius-md) !important;
}

body.admin .tab-btn {
    margin: 0;
    padding: 9px 16px;
    color: var(--text-muted) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: var(--radius-full) !important;
    box-shadow: none !important;
    font-weight: 600;
}

body.admin .tab-btn:hover {
    color: var(--primary-dark) !important;
    background: var(--surface-2) !important;
    transform: none;
}

body.admin .tab-btn.active {
    color: #fff !important;
    background: var(--gradient-primary) !important;
    box-shadow: var(--shadow-btn) !important;
}

body.admin .stat-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    border-top: 0 !important;
    box-shadow: var(--shadow-brand-sm) !important;
}

body.admin .stat-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-accent);
}

body.admin .stat-card:hover {
    box-shadow: var(--shadow-brand-md) !important;
    transform: translateY(-3px);
}

@media (max-width: 768px) {
    body.admin .tab-btn {
        flex: 0 0 auto;
    }
}

/* --- Admin: badges de estado de tickets (dispoñibles en tódalas páxinas) --- */
.status-badge.status-open,
.status-badge.status-progress,
.status-badge.status-closed {
    display: inline-block;
    width: fit-content;
    padding: 4px 12px;
    border-radius: var(--radius-full) !important;
    font-size: .82rem;
    font-weight: 600;
}

.status-badge.status-open { color: var(--warning-text); background: var(--warning-bg); border: 1px solid #e7d7b9; }
.status-badge.status-progress { color: var(--info); background: var(--info-bg); border: 1px solid #cfdce5; }
.status-badge.status-closed { color: var(--success-text); background: var(--success-bg); border: 1px solid #cfe0d5; }

/* --- CTAs de pé de páxina: botón primario consistente en todas as páxinas --- */
footer.right .footerContainer,
footer.no-margin.right .footerContainer {
    min-height: 44px;
    padding: 10px 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--radius-full);
    color: #fff !important;
    background: var(--gradient-primary) !important;
    box-shadow: var(--shadow-btn) !important;
    font-weight: 600;
    text-transform: none !important;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}

footer.right .footerContainer:hover,
footer.no-margin.right .footerContainer:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-btn-hover) !important;
}

footer.right .footerContainer .material-symbols-outlined,
footer.no-margin.right .footerContainer .material-symbols-outlined {
    color: #fff !important;
    font-size: 22px;
    line-height: 1;
}

/* --- Admin: buscador dos paneis sen desbordar + ligazóns lexibles --- */
body.admin section.filters input {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 320px;
    background-position: right 12px center;
}

body.admin ul.table a {
    color: var(--primary) !important;
    font-weight: 600;
}

body.admin ul.table a:hover {
    color: var(--primary-dark) !important;
    text-decoration: underline;
}

/* =========================================================================
   COMMUNITY PORTAL — rediseño do header e das seccións baixo o hero
   (.community-hero queda intacto; aplícase ás 4 vistas do portal)
   ========================================================================= */

/* --- Header: vidro con acento de marca e CTA en degradado --- */
.community-header {
    padding: 12px clamp(18px, 3vw, 48px);
    background: #fff;
    border-bottom: 1px solid rgba(18, 88, 77, .12);
    box-shadow: 0 8px 28px rgba(12, 61, 54, .07);
}

.community-logo .logo-mark {
    background: var(--gradient-primary);
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(12, 61, 54, .30), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.community-nav {
    gap: 6px;
}

.community-nav a {
    padding: 9px 16px;
    border-radius: 999px;
    transition: color .15s ease, background .15s ease;
}

.community-nav a:hover {
    color: var(--primary-dark);
    background: var(--brand-tint);
}

.community-nav .community-cta {
    margin-left: 8px;
    padding: 10px 24px;
    border: 0;
    border-radius: 999px;
    background: var(--gradient-primary);
    box-shadow: var(--shadow-btn);
    transition: transform .18s ease, box-shadow .18s ease;
}

.community-nav .community-cta:hover {
    background: var(--gradient-primary-hover);
    box-shadow: var(--shadow-btn-hover);
    transform: translateY(-1px);
}

.community-language-form {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    height: 42px;
    margin-left: 4px;
    color: var(--primary-dark);
}

.community-language-form > .material-symbols-outlined {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 10px;
    color: var(--primary);
    font-size: 18px;
    pointer-events: none;
    transform: translateY(-50%);
}

body#community .community-language-form select {
    width: 76px;
    height: 42px;
    min-height: 42px;
    margin: 0;
    padding: 0 25px 0 34px !important;
    appearance: none;
    -webkit-appearance: none;
    color: var(--primary-dark);
    background: var(--brand-tint) !important;
    border: 1px solid rgba(18, 88, 77, .18) !important;
    border-radius: 999px !important;
    outline: none;
    font: 750 .76rem/1 var(--font-sans);
    letter-spacing: .04em;
    text-align: left;
    text-align-last: left;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

body#community .community-language-form select:hover,
body#community .community-language-form select:focus-visible {
    background: #fff !important;
    border-color: rgba(18, 88, 77, .38) !important;
    box-shadow: 0 0 0 3px rgba(18, 88, 77, .09) !important;
}

.community-language-chevron {
    position: absolute;
    top: 50%;
    right: 11px;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid var(--primary);
    border-bottom: 1.5px solid var(--primary);
    pointer-events: none;
    transform: translateY(-70%) rotate(45deg);
}

.community-language-form noscript button {
    min-width: 38px;
    height: 38px;
    margin-left: 5px;
    padding: 0 8px;
    border-radius: 999px;
}

.community-create-project-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    margin-top: 24px;
    padding: 12px 24px;
    color: #fff !important;
    background: var(--gradient-primary);
    border: 1px solid rgba(12, 61, 54, .45);
    border-radius: 999px;
    box-shadow: var(--shadow-btn-hover);
    font-weight: 750;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.community-create-project-cta:hover,
.community-create-project-cta:focus-visible {
    color: #fff !important;
    background: var(--gradient-primary-hover);
    box-shadow: 0 12px 28px rgba(12, 61, 54, .30);
    transform: translateY(-2px);
}

.community-create-project-cta .material-symbols-outlined {
    font-size: 22px;
}

@media (max-width: 640px) {
    .community-nav { gap: 2px; }
    .community-nav a { padding: 8px 10px; font-size: .84rem; }
    .community-nav .community-cta { margin-left: 4px; padding: 9px 16px; }
}

@media (max-width: 480px) {
    .community-header {
        padding-right: 10px;
        padding-left: 10px;
    }

    .community-logo .logo-mark-img {
        width: 132px;
        height: 48px;
    }

    .community-language-form {
        height: 38px;
        margin-left: 0;
    }

    .community-language-form > .material-symbols-outlined {
        display: none;
    }

    body#community .community-language-form select {
        width: 56px;
        height: 38px;
        min-height: 38px;
        padding: 0 20px 0 10px !important;
        font-size: .72rem;
    }

    .community-language-chevron {
        right: 9px;
    }

    .community-nav .community-cta {
        margin-left: 2px;
        padding: 8px 10px;
        font-size: .76rem;
    }

    .community-create-project-cta {
        width: min(100%, 280px);
        margin-top: 20px;
    }
}

/* --- Cabeceiras de sección: barra de acento en degradado sobre o título --- */
.community-section-header h2 {
    padding-left: 0;
    border-left: 0;
}

.community-section-header h2::before {
    content: "";
    display: block;
    width: 46px;
    height: 4px;
    margin-bottom: 12px;
    border-radius: 999px;
    background: var(--gradient-accent);
}

.community-section-header p {
    margin-left: 0;
}

/* --- Novidades: banda verde profunda con tarxetas claras --- */
/* Novidades: sección clara e editorial, coma o resto da páxina. As novas
   son tarxetas horizontais (imaxe á esquerda, texto á dereita) en lista
   acoutada, de xeito que 1-2 novas non ocupan media pantalla. */
.community-news-section {
    background: transparent;
    padding-bottom: clamp(16px, 2vw, 28px);
}

.community-news-section .community-section-header {
    display: block;
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}

.community-news-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 980px;
    margin: 0 auto;
}

.community-news-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-brand-sm), inset 0 1px 0 rgba(255, 255, 255, .6);
}

.community-news-card:hover {
    border-color: rgba(18, 88, 77, .30);
    box-shadow: var(--shadow-brand-md);
    transform: translateY(-2px);
}

.community-news-card .community-news-card-image {
    flex: 0 0 240px;
    width: 240px;
    height: auto;
    min-height: 150px;
}

.community-news-card .community-news-card-body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 18px 22px 20px;
}

@media (max-width: 640px) {
    .community-news-card {
        flex-direction: column;
    }

    .community-news-card .community-news-card-image {
        flex: 0 0 auto;
        width: 100%;
        height: 160px;
    }
}

.community-news-actions {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}

.community-news-toggle {
    border-radius: 999px;
}

/* --- Mapa: marco elevado con sombra de marca e pista como chip --- */
.community-map-section {
    background: transparent;
}

.community-map-container {
    border: 1px solid rgba(18, 88, 77, .16);
    box-shadow: var(--shadow-brand-lg);
}

.community-map-hint {
    display: inline-flex;
    align-items: center;
    margin-top: 10px;
    padding: 6px 12px;
    font-style: normal;
    font-size: .78rem;
    color: var(--primary-dark);
    background: var(--accent-light);
    border: 1px solid rgba(0, 200, 166, .35);
    border-radius: 999px;
}

/* --- Tarxetas de proxecto: profundidade verde e imaxe con veladura --- */
.community-project-card {
    border-color: var(--border-soft);
    box-shadow: var(--shadow-brand-sm), inset 0 1px 0 rgba(255, 255, 255, .6);
}

.community-project-card:hover {
    border-color: rgba(18, 88, 77, .30);
    box-shadow: var(--shadow-brand-lg);
    transform: translateY(-3px);
}

.community-project-card-image {
    position: relative;
}

.community-project-card-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(12, 61, 54, 0) 55%, rgba(12, 61, 54, .28) 100%);
}

.community-project-card-footer {
    background: linear-gradient(180deg, var(--surface-1) 0%, var(--brand-tint) 100%);
}

.community-project-card-meta {
    flex-wrap: wrap;
    row-gap: 4px;
}

.community-project-card-meta span {
    white-space: nowrap;
}

.community-project-card-meta .material-symbols-outlined {
    color: var(--accent-dark);
}

.community-project-card-badge {
    border-radius: 50%;
}

.community-project-card:hover .community-project-card-badge {
    background: var(--gradient-primary);
    box-shadow: 0 4px 10px rgba(12, 61, 54, .30);
}

/* --- Botón "Ver todos os proxectos": píldora en degradado de marca --- */
.community-projects-view-all,
.community-projects-view-all:hover {
    color: #fff;
    border: 0;
    border-radius: 999px;
}

.community-projects-view-all {
    background: var(--gradient-primary) !important;
    box-shadow: var(--shadow-btn) !important;
    transition: transform .18s ease, box-shadow .18s ease;
}

.community-projects-view-all:hover {
    background: var(--gradient-primary-hover) !important;
    box-shadow: var(--shadow-btn-hover) !important;
    transform: translateY(-1px);
}

/* --- Estado baleiro --- */
.community-empty .material-symbols-outlined {
    color: rgba(18, 88, 77, .28);
}

/* --- Footer: peche en verde profundo, espello da banda de novidades --- */
.community-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 52px clamp(20px, 4vw, 60px) 46px;
    border-top: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background:
        radial-gradient(760px 300px at 50% -20%, rgba(0, 200, 166, .14), transparent 60%),
        linear-gradient(180deg, #0e463e 0%, #092b26 100%) !important;
}

.community-footer p {
    color: rgba(255, 255, 255, .70);
}

.community-footer .community-footer-logo {
    color: #fff;
}

.community-footer a {
    color: #8fe3d2;
}

.community-footer a:hover {
    color: #fff;
}

.community-footer-signature {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    margin-bottom: 7px;
}

.community-footer-signature p {
    margin: 0;
}

.community-footer-divider {
    width: 1px;
    height: 28px;
    background: rgba(255, 255, 255, .20);
}

.community-footer a.community-footer-cesga {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 7px 11px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(143, 227, 210, .18);
    border-radius: 10px;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.community-footer a.community-footer-cesga:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(143, 227, 210, .42);
    transform: translateY(-1px);
}

.community-footer-cesga img {
    display: block;
    width: 112px;
    height: auto;
}

@media (max-width: 560px) {
    .community-footer-signature {
        flex-direction: column;
        gap: 9px;
    }

    .community-footer-divider {
        width: 42px;
        height: 1px;
    }

    .community-footer a.community-footer-cesga {
        min-height: 38px;
        padding: 6px 10px;
    }

    .community-footer-cesga img {
        width: 100px;
    }
}

/* --- Detalle de proxecto: hero lexible con chips de vidro --- */
.community-project-hero {
    min-height: 340px;
    background-color: var(--primary-dark);
}

.community-project-hero-overlay {
    background: linear-gradient(180deg, rgba(9, 43, 38, .38) 0%, rgba(9, 43, 38, .68) 50%, rgba(7, 34, 30, .94) 100%);
    backdrop-filter: blur(3px) saturate(120%);
    -webkit-backdrop-filter: blur(3px) saturate(120%);
}

.community-project-hero-content h1 {
    text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}

.community-project-hero-content > p,
.community-project-hero-main > p {
    text-shadow: 0 1px 8px rgba(0, 0, 0, .30);
}

.community-back-link {
    padding: 7px 14px 7px 10px;
    margin-bottom: 18px;
    color: #fff;
    background: rgba(12, 61, 54, .48);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background .15s ease;
}

.community-back-link:hover {
    color: #fff;
    background: rgba(12, 61, 54, .70);
}

.community-project-hero-stats {
    gap: 10px;
}

.community-project-hero-stat {
    padding: 8px 16px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.community-project-hero-stat .material-symbols-outlined {
    font-size: 20px;
    color: var(--accent);
}

.community-project-hero-stat strong {
    font-size: 1.05rem;
}

.community-project-hero-stat > span:last-child {
    font-size: .72rem;
    color: rgba(255, 255, 255, .78);
}

/* --- Detalle de proxecto: gutters propios en toda resolución --- */
.community-project-layout {
    padding: clamp(24px, 4vw, 48px) clamp(18px, 3vw, 24px);
    gap: clamp(24px, 4vw, 36px);
}

.community-project-main,
.community-project-aside {
    min-width: 0;
}

@media (min-width: 992px) {
    .community-project-layout {
        padding: clamp(32px, 4vw, 56px) clamp(20px, 4vw, 60px);
        gap: 44px;
    }

    .community-project-main {
        padding: 0;
    }

    .community-project-aside {
        padding: 0;
        top: 84px;
        max-height: calc(100vh - 100px);
    }
}

/* --- Detalle de proxecto: tarxetas de categoría e observación --- */
.community-topics-grid {
    gap: 16px;
}

.community-topic-card .community-project-card-image {
    height: 120px;
}

.community-observation-card:hover {
    border-color: rgba(18, 88, 77, .30);
    box-shadow: var(--shadow-brand-md);
    transform: translateY(-3px);
}

.community-observation-image {
    position: relative;
}

.community-observation-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(12, 61, 54, 0) 60%, rgba(12, 61, 54, .22) 100%);
}

.community-observation-place .material-symbols-outlined {
    color: var(--accent-dark);
}

/* --- Aside: mapa como tarxeta elevada --- */
.community-project-map-block {
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-brand-md);
}

.community-project-map-block .community-section-header {
    display: block;
    margin-bottom: 14px;
}

.community-project-map-block .community-section-header h2 {
    font-size: 1.15rem;
}

.community-project-map-block .community-section-header h2::before {
    width: 34px;
    height: 3px;
    margin-bottom: 8px;
}

.community-project-map-block .community-map-container {
    width: 100%;
    height: clamp(430px, 56vh, 620px);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: none;
}

@media (min-width: 992px) {
    .community-project-layout:not(.community-project-layout-single) {
        grid-template-columns: minmax(0, 1fr) minmax(440px, 38%);
        max-width: 1400px;
    }
}

@media (max-width: 991px) {
    .community-project-map-block .community-map-container {
        height: clamp(420px, 58vh, 540px);
    }
}

@media (max-width: 480px) {
    .community-project-map-block {
        padding: 14px;
    }

    .community-project-map-block .community-map-container {
        height: clamp(400px, 62vh, 500px);
    }
}

/* --- Aside: CTA "Queres participar?" en verde profundo --- */
.community-cta-join {
    text-align: center;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-brand-lg);
    overflow: hidden;
    background:
        radial-gradient(420px 220px at 85% -10%, rgba(0, 200, 166, .22), transparent 60%),
        linear-gradient(160deg, #115248 0%, #0a332d 100%);
}

.community-cta-join > .material-symbols-outlined {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    font-size: 28px;
    color: #fff !important;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
}

.community-cta-join h2 {
    color: #fff;
}

.community-cta-join p {
    color: rgba(255, 255, 255, .75);
}

body#community .community-cta-join .button {
    gap: 8px;
    color: var(--primary-dark) !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(4, 24, 21, .35) !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

body#community .community-cta-join .button:hover {
    background: var(--accent-light) !important;
    box-shadow: 0 14px 30px rgba(4, 24, 21, .40) !important;
    transform: translateY(-1px);
}

body#community .community-cta-join .button .material-symbols-outlined {
    width: auto;
    height: auto;
    margin: 0;
    font-size: 20px;
    color: var(--primary-dark) !important;
    background: transparent;
    border: 0;
}

/* =========================================================================
   PARTICIPACIÓN ANÓNIMA — tipo Público (`open`) + moderación
   ========================================================================= */

/* Aviso de proxecto Público na páxina comunitaria */
.community-open-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    padding: 14px 18px;
    border: 1px solid rgba(0, 200, 166, .35);
    border-radius: var(--radius-md);
    background: var(--accent-light);
    color: var(--primary-dark);
}

.community-open-notice .material-symbols-outlined {
    font-size: 26px;
    color: var(--accent-dark);
    flex-shrink: 0;
}

.community-open-notice p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.5;
}

/* Botón "Observar" nas tarxetas de categoría (tipo Público) */
.community-topic-observe {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--gradient-primary);
    color: #fff;
    font-weight: 600;
    font-size: .82rem;
    text-decoration: none;
    box-shadow: var(--shadow-btn);
    transition: transform .18s ease, box-shadow .18s ease;
}

.community-topic-observe:hover {
    background: var(--gradient-primary-hover);
    box-shadow: var(--shadow-btn-hover);
    transform: translateY(-1px);
}

.community-topic-observe .material-symbols-outlined {
    font-size: 18px;
}

.community-topic-observe-locked {
    cursor: default;
    opacity: .68;
}

.community-topic-observe-locked:hover {
    color: var(--text-muted);
    background: var(--surface-1);
    box-shadow: none;
    transform: none;
}

/* Banner de agradecemento tras enviar (pendente de revisión) */
.community-submitted-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 24px;
    padding: 16px 18px;
    border: 0;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(420px 200px at 90% -20%, rgba(0, 200, 166, .22), transparent 60%),
        linear-gradient(160deg, #115248 0%, #0a332d 100%);
    color: #fff;
    box-shadow: var(--shadow-brand-md);
}

.community-submitted-banner > .material-symbols-outlined {
    font-size: 28px;
    color: var(--accent);
    flex-shrink: 0;
}

.community-submitted-banner strong { display: block; margin-bottom: 2px; }
.community-submitted-banner p { margin: 0; font-size: .88rem; color: rgba(255, 255, 255, .8); line-height: 1.5; }

.community-submitted-close {
    margin-left: auto;
    display: inline-flex;
    padding: 4px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .7);
    cursor: pointer;
    border-radius: 50%;
}

.community-submitted-close:hover { color: #fff; background: rgba(255, 255, 255, .12); }

/* --- Moderación: lista de observacións anónimas pendentes (páxina proxecto) --- */
.pending-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    margin-left: 6px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--primary-dark);
    font-size: .78rem;
    font-weight: 700;
    vertical-align: middle;
}

.pending-review-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#pendingReviewBlock {
    scroll-margin-top: 84px;
}

.pending-review-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.pending-review-thumb {
    width: 68px;
    height: 68px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    background-size: cover;
    background-position: center;
    background-color: var(--surface-2);
}

.pending-review-thumb-empty {
    display: grid;
    place-items: center;
    color: var(--text-subtle);
}

.pending-review-thumb-empty .material-symbols-outlined { font-size: 28px; }

.pending-review-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pending-review-topic { font-weight: 680; color: var(--text); font-size: .95rem; }
.pending-review-origin {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 5px;
    margin-bottom: 3px;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: .7rem;
    font-weight: 750;
}
.pending-review-origin .material-symbols-outlined { font-size: 15px; }
.pending-review-origin.is-nsfw { background: #fff0ec; color: #9c392e; }
.pending-review-item.is-nsfw-review { border-color: rgba(196, 74, 61, .34); background: #fffbfa; }
.pending-review-nsfw-reason {
    margin: 5px 0 2px;
    padding: 8px 10px;
    border-left: 3px solid #c44a3d;
    border-radius: 6px;
    background: #fff3f0;
    color: #75352e;
    font-size: .78rem;
    line-height: 1.4;
}

.pending-review-fields {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: .82rem;
    color: var(--text-muted);
}

.pending-review-fields span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pending-review-date { font-size: .74rem; color: var(--text-subtle); }

.pending-review-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.pending-review-actions .button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: .82rem;
    min-height: 0;
    text-decoration: none;
}

.pending-review-actions .material-symbols-outlined { font-size: 17px; }

@media (max-width: 640px) {
    .pending-review-item { flex-wrap: wrap; }
    .pending-review-actions { flex-direction: row; width: 100%; }
    .pending-review-actions .button { flex: 1; justify-content: center; }
}

/* Revisión completa dunha observación anónima pendente */
body#observation .observation-moderation-banner {
    width: min(1480px, calc(100% - clamp(24px, 5vw, 72px)));
    margin: clamp(18px, 3vw, 32px) auto 0;
    padding: clamp(18px, 2.5vw, 28px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border: 1px solid rgba(16, 132, 113, .24);
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, #effbf8 0%, #fff 70%);
    box-shadow: var(--shadow-sm);
}

body#observation .observation-moderation-copy {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}

body#observation .observation-moderation-copy > .material-symbols-outlined {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 50%;
    background: rgba(16, 185, 157, .13);
    color: var(--primary);
    font-size: 25px;
}

body#observation .observation-moderation-copy h2 {
    margin: 3px 0 4px;
    color: var(--text);
    font-size: clamp(1.05rem, 1.8vw, 1.35rem);
}

body#observation .observation-moderation-copy p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.5;
}

body#observation .observation-moderation-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

body#observation .observation-moderation-actions .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    padding: 10px 16px;
}

body#observation .observation-moderation-banner.is-submitting {
    opacity: .7;
    pointer-events: none;
}

body#observation .observation-moderation-banner.is-nsfw-review {
    border-color: rgba(196, 74, 61, .35);
    background: linear-gradient(135deg, #fff1ed 0%, #fff 72%);
}

body#observation .observation-moderation-banner.is-nsfw-review .observation-moderation-copy > .material-symbols-outlined {
    background: rgba(196, 74, 61, .12);
    color: #a53d32;
}

body#observation .observation-moderation-reason {
    margin-top: 10px;
    padding: 11px 13px;
    border-left: 4px solid #c44a3d;
    border-radius: 8px;
    background: rgba(255, 255, 255, .72);
    color: #713a34;
    line-height: 1.45;
}

body#observation .observation-moderation-reason ul {
    margin: 6px 0 0;
    padding-left: 20px;
}

body#observation .observation-moderation-reason p { margin: 6px 0 0; }

@media (max-width: 760px) {
    body#observation .observation-moderation-banner {
        align-items: stretch;
        flex-direction: column;
    }

    body#observation .observation-moderation-actions {
        width: 100%;
    }

    body#observation .observation-moderation-actions .button {
        flex: 1 1 0;
    }
}

/* =========================================================================
   COMMUNITY PROJECT — acción de participación no hero (dereita)
   ========================================================================= */
.community-project-hero-content {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(20px, 4vw, 48px);
    flex-wrap: wrap;
}

.community-project-hero-main {
    flex: 1 1 460px;
    min-width: 0;
}

.community-project-hero-cta {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    padding-bottom: 4px;
}

/* Tarxeta de participación (vidro sobre o hero escuro) */
.community-hero-cta-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 280px;
    max-width: 100%;
    padding: 22px 22px 24px;
    text-align: center;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 42px rgba(4, 24, 21, .34);
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
}

body#community .community-hero-cta-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    font-size: 26px !important;
    line-height: 1 !important;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
}

.community-hero-cta-title {
    margin: 2px 0 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.01em;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .3);
}

.community-hero-cta-hint {
    margin: 0;
    font-size: .82rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, .82);
    text-shadow: 0 1px 6px rgba(0, 0, 0, .3);
}

.community-hero-cta-card .community-hero-join-btn {
    width: 100%;
    justify-content: center;
    margin-top: 4px;
}

.community-hero-join-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 12px 26px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: var(--primary-dark);
    font-weight: 680;
    font-size: .95rem;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(4, 24, 21, .38);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.community-hero-join-btn:hover {
    background: var(--accent-light);
    box-shadow: 0 14px 32px rgba(4, 24, 21, .45);
    transform: translateY(-1px);
}

.community-hero-join-btn .material-symbols-outlined {
    font-size: 20px;
    color: var(--primary-dark);
}

.community-hero-join-btn[disabled] {
    opacity: .7;
    cursor: default;
    transform: none;
}

/* Variante translúcida (usuarios anónimos en tipo Público) */
.community-hero-join-btn-ghost {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: none;
}

.community-hero-join-btn-ghost:hover {
    background: rgba(255, 255, 255, .2);
    box-shadow: 0 8px 22px rgba(4, 24, 21, .3);
}

.community-hero-join-btn-ghost .material-symbols-outlined {
    color: #fff;
}

/* Layout dunha soa columna cando non hai mapa (aside) */
.community-project-layout-single {
    grid-template-columns: 1fr !important;
    max-width: 1000px;
}

/* Móbil: a tarxeta de participación cae debaixo do contido do hero, a todo o ancho */
@media (max-width: 768px) {
    .community-project-hero-content {
        flex-direction: column;
        align-items: stretch;
    }

    .community-project-hero-cta {
        justify-content: stretch;
    }

    .community-hero-cta-card {
        width: 100%;
    }
}

/* O botón de unirse é un <button>, que a capa de profundidade pinta con
   degradado verde !important. Forzamos o pílula branca (coma o resto de CTAs). */
body#community .community-hero-join-btn {
    background: #fff !important;
    border: 0 !important;
    color: var(--primary-dark) !important;
    box-shadow: 0 10px 26px rgba(4, 24, 21, .38) !important;
}

body#community .community-hero-join-btn:hover {
    background: var(--accent-light) !important;
    box-shadow: 0 14px 32px rgba(4, 24, 21, .45) !important;
}

body#community .community-hero-join-btn-ghost {
    background: rgba(255, 255, 255, .12) !important;
    border: 1px solid rgba(255, 255, 255, .35) !important;
    color: #fff !important;
    box-shadow: none !important;
}

body#community .community-hero-join-btn-ghost:hover {
    background: rgba(255, 255, 255, .2) !important;
    box-shadow: 0 8px 22px rgba(4, 24, 21, .3) !important;
}

/* Detalle de proxecto compacto en móbil: prioriza o acceso ao contido. */
@media (max-width: 768px) {
    .community-project-hero {
        min-height: 0;
        align-items: stretch;
    }

    .community-project-hero-content {
        gap: 14px;
        padding: 18px 16px 20px;
    }

    .community-project-hero-main {
        flex-basis: auto;
    }

    .community-project-hero .community-back-link {
        margin-bottom: 9px;
        padding: 5px 10px 5px 7px;
    }

    .community-project-hero-content h1 {
        margin-bottom: 6px;
        font-size: 1.55rem;
    }

    .community-project-hero-main > p {
        margin-bottom: 12px;
        font-size: .86rem;
        line-height: 1.4;
    }

    .community-project-hero-stats {
        gap: 6px;
    }

    .community-project-hero-stat {
        gap: 5px;
        padding: 5px 9px;
    }

    .community-project-hero-stat .material-symbols-outlined {
        font-size: 16px;
    }

    .community-project-hero-stat strong {
        font-size: .9rem;
    }

    .community-project-hero-stat > span:last-child {
        font-size: .6rem;
    }

    .community-project-hero-cta {
        padding-bottom: 0;
    }

    .community-hero-cta-card {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding: 11px 12px;
        text-align: left;
    }

    body#community .community-hero-cta-icon,
    .community-hero-cta-hint {
        display: none !important;
    }

    .community-hero-cta-title {
        flex: 1 1 120px;
        margin: 0;
        font-size: .98rem;
    }

    .community-hero-cta-card .community-hero-join-btn {
        flex: 1 1 145px;
        width: auto;
        min-height: 40px;
        margin-top: 0;
        padding: 8px 14px;
        font-size: .82rem;
    }

    .community-project-layout {
        padding-top: 14px;
    }
}

/* =========================================================================
   COMMUNITY PROJECT — diferenciar categorías (fichas-info) de observacións
   (fichas-foto con lenda superposta) para que non se confundan
   ========================================================================= */

/* Etiqueta "Categoría" sobre a imaxe da tarxeta de categoría */
.community-project-card-image { position: relative; }
.community-topic-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px 4px 8px;
    border-radius: 999px;
    background: rgba(12, 61, 54, .82);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.community-topic-tag .material-symbols-outlined { font-size: 14px; color: var(--accent); }

/* Observacións: fichas-foto máis pequenas, en galería, claramente distintas */
.community-observations-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
    gap: 14px;
}


.community-observation-card {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    min-height: 140px;
    padding: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--surface-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-brand-sm);
}

.community-observation-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 34, 30, 0) 42%, rgba(7, 34, 30, .84) 100%);
    pointer-events: none;
}

.community-observation-card:hover {
    border-color: rgba(18, 88, 77, .30);
    box-shadow: var(--shadow-brand-md);
    transform: translateY(-3px);
}

.community-observation-card-noimg {
    background: linear-gradient(150deg, var(--primary-light) 0%, var(--primary-dark) 100%);
}

/* Nas tarxetas sen imaxe non fai falla o velo escuro extra */
.community-observation-card-noimg::after {
    background: linear-gradient(180deg, rgba(7, 34, 30, 0) 55%, rgba(7, 34, 30, .38) 100%);
}

.community-observation-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding-bottom: 28px;
    font-size: 40px;
    color: rgba(255, 255, 255, .55);
}

.community-observation-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
}

.community-observation-caption .community-observation-author {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #fff;
    font-weight: 680;
    font-size: .84rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}

.community-observation-caption .community-observation-author .material-symbols-outlined {
    font-size: 15px;
    color: rgba(255, 255, 255, .85);
}

.community-observation-caption .community-observation-place {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: rgba(255, 255, 255, .88);
    font-size: .76rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}

.community-latest-observations {
    background: linear-gradient(180deg, var(--light) 0%, var(--brand-tint) 100%);
}

.community-latest-observations > .community-section-header,
.community-latest-observations > .community-observations-grid {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.community-latest-observations .community-observations-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
    gap: 18px;
}

.community-latest-observations .community-observation-card {
    min-height: 190px;
}

.community-latest-observation-project {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    z-index: 2;
    display: inline-flex;
    width: fit-content;
    max-width: calc(100% - 20px);
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    overflow: hidden;
    color: #fff;
    background: rgba(7, 51, 45, .82);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 720;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.community-latest-observation-project .material-symbols-outlined {
    flex: 0 0 auto;
    color: var(--accent);
    font-size: 15px;
}

@media (max-width: 640px) {
    .community-latest-observations {
        padding: 30px 16px 38px;
    }

    .community-latest-observations .community-observations-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .community-latest-observations .community-observation-card {
        min-height: 165px;
    }
}

.community-observation-caption .community-observation-place .material-symbols-outlined {
    font-size: 14px;
    color: var(--accent);
}

/* Cabeceira da tarxeta de "Crear novo proxecto" (mesmo look ca newTopic) */
body#newProject .newproject-topbar {
    margin: 0 0 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

body#newProject .newproject-topbar h2 {
    margin: 2px 0 8px;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--primary-dark);
    line-height: 1.15;
}

body#newProject .newproject-topbar .topic-form-subtitle {
    max-width: 62ch;
    line-height: 1.55;
}

/* =========================================================================
   NEW PROJECT — fluxo de creación en dous pasos
   ========================================================================= */
body#newProject main .content.project-editor.is-creation-flow {
    display: block !important;
    width: min(100%, 1760px) !important;
    max-width: 100vw !important;
    padding: clamp(20px, 2.5vw, 40px) !important;
    box-sizing: border-box !important;
    margin-inline: auto !important;
}

body#newProject form.project-builder-card {
    display: block;
    width: 100%;
    padding: 0 !important;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.project-builder-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr);
    align-items: stretch;
}

.project-basics-section,
.project-visibility-section {
    min-width: 0;
    padding: clamp(22px, 2.6vw, 34px);
}

.project-basics-section {
    border-right: 1px solid var(--border);
}

.project-visibility-section {
    background: var(--surface-1);
}

.project-form-grid {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    gap: clamp(22px, 3vw, 34px);
    align-items: start;
    padding-top: 24px;
}

.project-form-media,
.project-form-fields {
    min-width: 0;
}

body#newProject .project-image-preview {
    width: 100%;
    min-height: 0 !important;
    height: 190px !important;
    margin: 0;
}

.project-form-media .custom-file-upload {
    display: block;
    margin: 0;
    padding: 0;
}

.project-form-media .topic-media-hint {
    margin-top: 8px;
    text-align: center;
}

.project-form-fields {
    display: flex;
    flex-direction: column;
}

.project-form-fields input,
.project-form-fields textarea {
    width: 100%;
    box-sizing: border-box;
}

.project-form-fields textarea {
    min-height: 138px;
}

.project-visibility-section .visibility-control {
    margin-top: 24px;
}

.project-visibility-section .visibility-options {
    grid-template-columns: 1fr;
}

.project-builder-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px clamp(22px, 3vw, 36px);
    background: var(--surface-1);
    border-top: 1px solid var(--border);
}

@media (max-width: 900px) {
    .project-builder-layout {
        grid-template-columns: 1fr;
    }

    .project-basics-section,
    .project-visibility-section {
        grid-column: 1;
        border-right: 0;
    }

    body#newProject .is-creation-flow .is-mobile-step-hidden {
        display: none !important;
    }

    .project-form-grid {
        grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
    }
}

@media (max-width: 600px) {
    body#newProject #newProjectBody {
        padding-bottom: 0;
    }

    body#newProject main .content.project-editor.is-creation-flow {
        width: 100% !important;
        padding: 10px !important;
    }

    body#newProject form.project-builder-card {
        border-radius: var(--radius-md);
    }

    body#newProject .project-builder-topbar,
    .project-basics-section,
    .project-visibility-section {
        padding: 17px;
    }

    body#newProject .project-builder-topbar {
        gap: 16px;
    }

    .project-form-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        padding-top: 18px;
    }

    body#newProject .project-image-preview {
        height: 170px !important;
    }

    .project-form-fields textarea {
        min-height: 112px;
    }

    .project-visibility-section .visibility-control {
        margin-top: 18px;
    }

    .project-visibility-section .visibility-options {
        gap: 9px;
    }

    .project-visibility-section .visibility-option-content {
        min-height: 0;
        padding: 11px 13px;
    }

    .project-builder-submit {
        position: static;
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
        padding: 12px 17px calc(12px + env(safe-area-inset-bottom));
    }

    .project-builder-submit .topic-create-button {
        width: 100% !important;
    }
}

/* =========================================================================
   Aviso de acceso convidado (categoría dun proxecto Público)
   ========================================================================= */
.guest-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(7, 34, 30, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.guest-modal-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: min(100%, 420px);
    padding: 28px 26px 24px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
}

.guest-modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    font-size: 28px;
    line-height: 1;
    color: #fff;
    background: var(--gradient-primary);
    border-radius: 50%;
    box-shadow: var(--shadow-btn);
}

.guest-modal-card h2 {
    margin: 4px 0 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-dark);
}

.guest-modal-card p {
    margin: 0;
    font-size: .92rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.guest-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin-top: 6px;
}

.guest-modal-actions .button {
    width: 100%;
    justify-content: center;
    gap: 8px;
}

.guest-modal-actions a.button:not(.secondary),
.guest-modal-actions a.button:not(.secondary):hover,
.guest-modal-actions a.button:not(.secondary):focus-visible {
    color: #fff !important;
}


/* Logo de Peneira no header do portal community */
.community-logo .logo-mark-img {
    display: block;
    width: 214px;
    height: 72px;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
    box-shadow: none;
}

@media (min-width: 641px) {
    .community-header {
        min-height: 96px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

@media (max-width: 640px) {
    .community-header {
        min-height: 80px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .community-logo .logo-mark-img {
        width: 158px;
        height: 54px;
    }
}

/* =========================================================================
   FORO DA COMUNIDADE — widget na portada (novidades 70% / foro 30%) e
   páxinas do foro (listaxe + tema con respostas planas)
   ========================================================================= */

/* Fila novidades + widget */
.community-news-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(24px, 3vw, 40px);
    align-items: start;
    padding: 0 clamp(20px, 4vw, 60px);
}

@media (min-width: 1100px) {
    .community-news-row {
        grid-template-columns: minmax(0, 68fr) minmax(0, 32fr);
    }
}

/* Dentro da fila, a sección de novidades ocupa a súa columna (aliñada á
   esquerda) e o seu contido deixa de centrarse a 980px */
.community-news-row .community-news-section {
    padding-left: 0;
    padding-right: 0;
}

.community-news-row .community-news-section .community-section-header,
.community-news-row .community-news-grid,
.community-news-row .community-news-actions {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* Sen novas: o widget queda só, acoutado e centrado */
.community-news-row-nonews {
    grid-template-columns: 1fr !important;
}

.community-news-row-nonews .community-forum-widget-block {
    max-width: 560px;
    margin: clamp(28px, 4vw, 48px) auto;
}

/* Widget do foro */
.community-forum-widget-block {
    margin: clamp(40px, 5vw, 80px) 0;
}

/* Compactar a transición entre novidades/foro e mapa/proxectos. */
.community-news-row .community-forum-widget-block {
    margin-bottom: clamp(16px, 2vw, 28px);
}

@media (min-width: 641px) {
    .community-news-row + .community-two-col .community-map-section,
    .community-news-row + .community-two-col .community-section {
        padding-top: clamp(28px, 3vw, 44px);
    }
}

.community-forum-widget {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 22px 20px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-brand-md), inset 0 1px 0 rgba(255, 255, 255, .6);
}

@media (max-width: 640px) {
    .community-news-row {
        gap: 18px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .community-news-row .community-news-section {
        padding-top: 28px;
        padding-bottom: 0;
    }

    .community-forum-widget-block,
    .community-news-row-nonews .community-forum-widget-block {
        margin: 0 0 26px;
    }

    .community-two-col .community-map-section {
        padding: 26px 16px 20px;
    }

    .community-two-col .community-section {
        padding: 20px 16px 28px;
    }

    .community-section-header,
    body#community .community-forum-widget-header {
        margin-bottom: 22px;
    }
}

.community-forum-widget-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 32px;
}

.community-forum-widget-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    color: #fff;
    background: var(--gradient-primary);
    border-radius: 12px;
    box-shadow: var(--shadow-btn);
}

.community-forum-widget-icon .material-symbols-outlined {
    display: block;
    font-size: 22px;
    line-height: 1;
}

.community-forum-widget-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.community-forum-widget-list li + li {
    border-top: 1px solid var(--border-soft);
}

.community-forum-widget-list a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 11px 2px;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background .15s ease;
}

.community-forum-widget-list a:hover {
    background: var(--brand-tint);
}

.community-forum-widget-list strong {
    color: var(--text);
    font-size: .9rem;
    font-weight: 650;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.community-forum-widget-title,
.community-forum-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.community-forum-widget-title > strong,
.community-forum-title-row > strong {
    flex: 1 1 auto;
    min-width: 0;
}

.community-forum-pinned-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
    padding: 3px 7px;
    color: var(--primary-dark);
    background: var(--accent-light);
    border: 1px solid rgba(0, 200, 166, .35);
    border-radius: 999px;
    font-size: .66rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.community-forum-pinned-badge .material-symbols-outlined {
    font-size: 13px;
}

.community-forum-widget-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .74rem;
    color: var(--text-muted);
}

.community-forum-widget-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.community-forum-widget-meta .material-symbols-outlined {
    font-size: 14px;
    color: var(--accent-dark);
}

.community-forum-widget-empty {
    margin: 0;
    font-size: .86rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.community-forum-widget-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 20px;
    border-radius: 999px;
    background: var(--gradient-primary);
    color: #fff;
    font-weight: 600;
    font-size: .88rem;
    text-decoration: none;
    box-shadow: var(--shadow-btn);
    transition: transform .18s ease, box-shadow .18s ease;
}

.community-forum-widget-cta:hover {
    background: var(--gradient-primary-hover);
    box-shadow: var(--shadow-btn-hover);
    transform: translateY(-1px);
}

.community-forum-widget-cta .material-symbols-outlined {
    font-size: 18px;
}

/* Páxinas do foro */
.community-forum-page {
    max-width: 1040px;
    margin: 0 auto;
    padding: clamp(24px, 4vw, 44px) clamp(18px, 3vw, 24px) clamp(40px, 5vw, 70px);
}

.community-forum-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.community-forum-toolbar .community-search-wrapper {
    flex: 1 1 260px;
}

body#community .community-forum-toolbar input.community-search-input {
    padding: 10px 40px 10px 48px !important;
}

body#community .community-news-list-page input.community-search-input {
    padding: 10px 40px 10px 48px !important;
}

.community-forum-toolbar .community-search-icon,
.community-news-list-page .community-search-icon {
    top: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
}

.community-forum-toolbar .community-search-icon .material-symbols-outlined,
.community-news-list-page .community-search-icon .material-symbols-outlined {
    display: block;
    font-size: 20px;
    line-height: 1;
}

.community-forum-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 11px 22px;
    border: 0;
    border-radius: 999px;
    background: var(--gradient-primary);
    color: #fff;
    font-weight: 600;
    font-size: .88rem;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--shadow-btn);
    transition: transform .18s ease, box-shadow .18s ease;
}

.community-forum-new-btn:hover {
    background: var(--gradient-primary-hover);
    box-shadow: var(--shadow-btn-hover);
    transform: translateY(-1px);
}

.community-forum-new-btn .material-symbols-outlined {
    font-size: 19px;
}

/* Compositor (novo tema / resposta) */
.community-forum-composer {
    margin-bottom: 22px;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-brand-sm);
}

.community-forum-composer h3 {
    margin: 0 0 12px;
    font-size: 1.02rem;
    font-weight: 680;
    color: var(--primary-dark);
}

.community-forum-reply-composer {
    margin-top: 24px;
    background: linear-gradient(145deg, #fff 0%, var(--brand-tint) 100%);
    border: 1px solid rgba(18, 88, 77, .20);
    box-shadow: var(--shadow-brand-sm);
}

.community-forum-reply-composer h3 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.community-forum-reply-composer h3 .material-symbols-outlined {
    font-size: 21px;
    color: var(--accent-dark);
}

.community-forum-reply-composer .community-forum-textarea {
    background: #fff !important;
}

.community-forum-input,
.community-forum-textarea {
    width: 100%;
    padding: 11px 14px;
    margin-bottom: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    font-size: .92rem;
    font-family: inherit;
    outline: none;
    resize: vertical;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.community-forum-input:focus,
.community-forum-textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(18, 88, 77, .12);
}

.community-forum-composer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.community-forum-cancel {
    padding: 10px 18px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-muted);
    font-size: .86rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.community-forum-cancel:hover {
    border-color: var(--border-strong);
    color: var(--text);
}

.community-forum-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border: 0;
    border-radius: 999px;
    background: var(--gradient-primary);
    color: #fff;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-btn);
    transition: transform .18s ease, box-shadow .18s ease;
}

.community-forum-submit:hover {
    background: var(--gradient-primary-hover);
    box-shadow: var(--shadow-btn-hover);
    transform: translateY(-1px);
}

.community-forum-submit .material-symbols-outlined {
    font-size: 17px;
}

/* Listaxe de temas */
.community-forum-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.community-forum-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-brand-sm);
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.community-forum-item:hover {
    border-color: rgba(18, 88, 77, .30);
    box-shadow: var(--shadow-brand-md);
    transform: translateY(-2px);
}

.community-forum-item.is-pinned {
    background: var(--brand-tint);
    border-color: rgba(18, 88, 77, .30);
}

.community-forum-item.is-pinned .community-forum-item-avatar {
    color: #fff;
    background: var(--primary);
}

.community-forum-item-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    color: var(--primary);
    background: var(--primary-soft);
    border-radius: 50%;
}

.community-forum-item-avatar .material-symbols-outlined {
    display: block;
    font-size: 22px;
    line-height: 1;
}

.community-forum-item-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.community-forum-item-main strong {
    color: var(--text);
    font-size: 1rem;
    font-weight: 680;
    letter-spacing: -.01em;
}

.community-forum-title-row {
    flex-wrap: wrap;
}

.community-forum-item-excerpt {
    color: var(--text-muted);
    font-size: .84rem;
    line-height: 1.45;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.community-forum-item-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .76rem;
    color: var(--text-subtle);
}

.community-forum-item-replies {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    flex-shrink: 0;
    min-width: 64px;
    color: var(--text-muted);
}

.community-forum-item-replies .material-symbols-outlined {
    font-size: 17px;
    color: var(--accent-dark);
}

.community-forum-item-replies strong {
    font-size: 1rem;
    color: var(--primary-dark);
    line-height: 1;
}

.community-forum-item-replies span:last-child {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

@media (max-width: 560px) {
    .community-forum-item-excerpt { display: none; }
}

/* Publicacións (tema + respostas planas) */
.community-forum-post {
    margin-bottom: 12px;
    padding: 0;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-brand-sm);
}

.community-forum-post-original {
    border-color: rgba(18, 88, 77, .18);
    box-shadow: 0 12px 32px rgba(12, 61, 54, .09);
}

.community-forum-post:not(.community-forum-post-original) {
    margin-left: 0;
}

@media (max-width: 560px) {
    .community-forum-post {
        margin-bottom: 7px;
    }

    .community-forum-replies-header {
        margin: 14px 0 8px;
    }
}

.community-forum-post-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 14px 18px;
    background: #f8fbfa;
    border-bottom: 1px solid var(--border-soft);
}

.community-forum-post-original .community-forum-post-head {
    background: linear-gradient(110deg, rgba(18, 88, 77, .10), rgba(0, 200, 166, .045));
}

.community-forum-post-original .community-forum-item-avatar {
    color: #fff;
    background: var(--gradient-primary);
    border-color: transparent;
}

.community-forum-post-head strong {
    display: block;
    color: var(--text);
    font-size: .92rem;
}

.community-forum-post-date {
    display: block;
    font-size: .74rem;
    color: var(--text-subtle);
}

.community-forum-post-badge {
    margin-left: auto;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--accent-light);
    border: 1px solid rgba(0, 200, 166, .35);
    color: var(--primary-dark);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.community-forum-reply-number {
    margin-left: auto;
    min-width: 34px;
    padding: 4px 9px;
    text-align: center;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--border);
    color: var(--text-subtle);
    font-size: .7rem;
    font-weight: 700;
}

.community-forum-post-body {
    margin: 0;
    padding: clamp(18px, 3vw, 28px);
    color: var(--text-soft);
    font-size: clamp(.94rem, 1.35vw, 1.02rem);
    line-height: 1.72;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.community-forum-replies-header {
    margin: 22px 0 12px;
}

.community-forum-replies-header h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-dark);
}

.community-forum-replies-header h2 .material-symbols-outlined {
    font-size: 20px;
    color: var(--accent-dark);
}

@media (max-width: 560px) {
    .community-forum-page {
        padding-inline: 12px;
    }

    .community-forum-post-head {
        gap: 9px;
        padding: 12px 13px;
    }

    .community-forum-post-head .community-forum-item-avatar {
        width: 40px;
        height: 40px;
    }

    .community-forum-post-badge {
        padding-inline: 9px;
        font-size: .64rem;
    }

    .community-forum-post-body {
        padding: 17px 15px 20px;
        line-height: 1.65;
    }
}

/* CTA de login para responder */
.community-forum-login-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding: 26px 20px;
    text-align: center;
    background: var(--brand-tint);
    border: 1px dashed rgba(18, 88, 77, .30);
    border-radius: var(--radius-lg);
}

.community-forum-login-cta .material-symbols-outlined {
    font-size: 28px;
    color: var(--primary);
}

.community-forum-login-cta p {
    margin: 0;
    font-size: .9rem;
    color: var(--text-muted);
}

/* Lexibilidade dos heros pequenos do portal sobre a imaxe de fondo */
.community-hero-sm h1,
.community-hero-sm > p {
    text-shadow: 0 1px 2px rgba(255, 255, 255, .9), 0 2px 16px rgba(255, 255, 255, .7);
}

/* Offline observations redesign */
body#offline .offline-observations-page {
    width: min(100%, 980px);
    margin: 0 auto;
    padding: clamp(22px, 4vw, 42px);
}

body#offline .offline-observations-panel {
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

body#offline .offline-observations-heading {
    padding: clamp(22px, 4vw, 34px);
    background: var(--surface-1);
    border-bottom: 1px solid var(--border);
}

body#offline .offline-observations-heading h2 {
    margin: 4px 0 8px;
    color: var(--text);
    font-size: clamp(1.4rem, 3vw, 2rem);
}

body#offline .offline-observations-heading p {
    max-width: 620px;
    margin: 0;
    color: var(--text-muted);
    line-height: 1.5;
}

body#offline .offline-observations-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: clamp(18px, 3vw, 26px);
    padding: 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

body#offline .offline-observations-summary > .material-symbols-outlined {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    color: var(--primary);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 50%;
}

body#offline .offline-observations-summary div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

body#offline .offline-observations-summary strong {
    color: var(--text);
}

body#offline .offline-observations-summary span:not(.material-symbols-outlined) {
    color: var(--text-muted);
    font-size: .86rem;
}

body#offline .offline-observations-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0 clamp(14px, 3vw, 22px) clamp(14px, 3vw, 22px);
    list-style: none;
}

body#offline .offline-observation-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: stretch;
    cursor: pointer;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

body#offline .offline-observation-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
}

body#offline .offline-observation-card:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

body#offline .offline-observation-card .main {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    min-width: 0;
}

body#offline .offline-observation-card .picture {
    width: 72px;
    min-width: 72px;
    height: 72px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background-position: center;
    background-size: cover;
}

body#offline .offline-observation-card .desc {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}

body#offline .offline-observation-card .name {
    font-weight: 680;
    font-size: 1rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body#offline .offline-observation-card .date {
    font-size: .78rem;
    color: var(--text-muted);
}

body#offline .offline-observation-card .action {
    display: grid;
    place-items: center;
    color: var(--text-muted);
    border-left: 1px solid var(--border);
    background: var(--surface-1);
}

body#offline .offline-observation-card .action .material-symbols-outlined {
    font-size: 20px;
}

body#offline .offline-observations-empty {
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: clamp(28px, 6vw, 54px);
    color: var(--text-muted);
    text-align: center;
}

body#offline .offline-observations-empty[hidden] {
    display: none !important;
}

body#offline .offline-observations-empty > .material-symbols-outlined {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    color: var(--success);
    background: var(--success-bg);
    border-radius: 50%;
    font-size: 32px;
}

body#offline .offline-observations-empty .button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

body#project #draftObservationPrompt {
    align-items: center;
    padding: clamp(12px, 3vw, 40px);
}

body#project #draftObservationPrompt #content.draft-observation-dialog {
    position: relative;
    display: flex;
    width: min(520px, 100%);
    max-width: 520px;
    height: auto;
    max-height: min(720px, 92vh);
    flex-direction: column;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-xl) !important;
}

body#project #draftObservationPrompt .draft-observation-header {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 20px 26px;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border);
}

body#project #draftObservationPrompt .draft-observation-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    color: var(--primary);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 50%;
}

body#project #draftObservationPrompt .draft-observation-header .title {
    margin: 0 0 2px;
    color: var(--text) !important;
    font-size: 1.08rem;
    font-weight: 700;
    text-align: left !important;
}

body#project #draftObservationPrompt .draft-observation-header p:last-child {
    margin: 0;
    color: var(--text-muted);
    font-size: .82rem;
}

body#project #draftObservationPrompt #content.draft-observation-dialog > .close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 34px;
    height: 34px;
    min-height: 34px;
    margin: 0;
    padding: 0;
    appearance: none;
    background-image: none !important;
    background-color: var(--surface) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 50%;
    z-index: 6;
}

body#project #draftObservationPrompt #content.draft-observation-dialog > .close::before,
body#project #draftObservationPrompt #content.draft-observation-dialog > .close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 2px;
    background: var(--text-soft);
    border-radius: 2px;
}

body#project #draftObservationPrompt #content.draft-observation-dialog > .close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

body#project #draftObservationPrompt #content.draft-observation-dialog > .close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

body#project #draftObservationPrompt .draft-observation-body {
    position: static;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    display: grid;
    gap: 16px;
    padding: 24px 26px;
}

body#project #draftObservationPrompt .draft-observation-summary {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    padding: 16px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

body#project #draftObservationPrompt .draft-observation-summary > .material-symbols-outlined {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    color: var(--primary);
    background: var(--surface);
    border-radius: 50%;
}

body#project #draftObservationPrompt .draft-observation-summary strong,
body#project #draftObservationPrompt .draft-observation-summary span {
    display: block;
}

body#project #draftObservationPrompt .draft-observation-summary strong {
    color: var(--text);
}

body#project #draftObservationPrompt .draft-observation-summary span {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: .8rem;
}

body#project #draftObservationPrompt .draft-observation-body > p {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.5;
}

body#project #draftObservationPrompt .draft-observation-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding: 14px 26px;
    background: var(--surface);
    border-top: 1px solid var(--border);
}

body#project #draftObservationPrompt .draft-observation-actions .button {
    display: inline-flex;
    width: auto;
    min-width: 112px;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0;
    padding: 8px 15px !important;
    text-decoration: none;
}

body#project #draftObservationPrompt .draft-observation-actions .secondary {
    color: var(--text-soft) !important;
    background: var(--surface) !important;
    border: 1px solid var(--border-strong) !important;
}

@media (max-width: 700px) {
    body#offline .offline-observations-page {
        padding: 12px;
    }

    body#offline .offline-observation-card .main {
        gap: 10px;
        padding: 10px 12px;
    }

    body#offline .offline-observation-card .picture {
        width: 56px;
        min-width: 56px;
        height: 56px;
    }

    body#project #draftObservationPrompt {
        padding: 12px;
    }

    body#project #draftObservationPrompt .draft-observation-header {
        padding: 17px 18px;
    }

    body#project #draftObservationPrompt #content.draft-observation-dialog > .close {
        top: 17px;
        right: 16px;
    }

    body#project #draftObservationPrompt .draft-observation-body {
        padding: 18px;
    }

    body#project #draftObservationPrompt .draft-observation-actions {
        padding: 12px 18px;
    }

    body#project #draftObservationPrompt .draft-observation-actions .button {
        min-width: 0;
        flex: 1 1 0;
    }
}

/* =========================================================
   Review offline observation — redeseño compacto
   ========================================================= */

body#observation .observation-review-summary .review-summary-info {
    display: grid;
    gap: 10px;
    margin: 16px 0 20px;
}

body#observation .observation-review-summary .review-summary-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

body#observation .observation-review-summary .review-summary-label {
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

body#observation .observation-review-summary .review-summary-value {
    color: var(--text);
    font-size: .95rem;
    font-weight: 500;
}

body#observation .observation-review-stage h3 {
    margin: 0 0 14px;
    color: var(--text);
    font-size: 1.1rem;
}

body#observation .observation-review-stage .review-field-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

body#observation .observation-review-stage .review-field-label {
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

body#observation .observation-review-stage .review-field-value {
    color: var(--text);
    font-size: .94rem;
    overflow-wrap: anywhere;
}

body#observation .review-field-input {
    width: 100%;
    margin-top: 6px;
    padding: 8px 10px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: .9rem;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color .15s ease;
}

body#observation .review-field-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-bg, rgba(18,88,77,.1));
}

body#observation textarea.review-field-input {
    resize: vertical;
    min-height: 60px;
}

body#observation .observation-review-stage .review-field-item img,
body#observation .observation-review-stage .review-field-item video {
    display: block;
    width: 100%;
    max-height: 400px;
    margin-top: 8px;
    object-fit: contain;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
}

body#observation .observation-review-stage .review-field-item audio {
    width: 100%;
    margin-top: 8px;
}

body#observation .observation-review-stage #reviewObservationMap {
    width: 100%;
    min-height: 320px;
    margin-top: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

body#observation .observation-review-stage .alert {
    margin: 20px 0 0;
    padding: 10px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-size: .85rem;
}

body#observation #createOfflineObservation.footerContainer {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

/* Review steps — 2 paso (campos + mapa) */
body#observation .review-step h3 {
    margin: 0 0 14px;
    color: var(--text);
    font-size: 1.1rem;
}

body#observation .review-location-info {
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-size: .85rem;
}

body#observation .review-retry-location {
    position: fixed;
    right: 22px;
    bottom: 80px;
    z-index: 500;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: #fff;
    background: var(--primary);
    border-radius: 50%;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: background .18s ease, transform .18s ease;
}

body#observation .review-retry-location:hover {
    background: var(--primary-dark);
    transform: scale(1.05);
}

body#observation footer.right {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

body#observation footer .footerContainer.secondary {
    color: var(--text-soft);
    background: var(--surface);
    border: 1px solid var(--border-strong);
}

body#observation footer .footerContainer[hidden] {
    display: none !important;
}

/* Edit fields mode */
body#observation .edit-fields-controls {
    display: flex;
    position: sticky;
    bottom: 0;
    z-index: 8;
    justify-content: flex-end;
    gap: 10px;
    margin: 18px -20px -20px;
    padding: 14px 20px;
    background: rgba(255, 255, 255, .94);
    border-top: 1px solid var(--border);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: 0 -8px 24px rgba(26, 52, 48, .06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

body#observation .edit-fields-controls .button {
    min-width: 124px;
    margin: 0;
}

body#observation .fieldsList.edit-mode {
    grid-template-columns: 1fr;
    gap: 14px;
}

body#observation .content .fieldsList.edit-mode > li {
    padding: clamp(14px, 2vw, 20px);
    background: var(--surface);
    border-color: var(--border-strong);
    box-shadow: 0 5px 18px rgba(26, 52, 48, .045);
}

body#observation .fieldsList.edit-mode .field-edit-content > .key {
    display: block;
    margin-bottom: 10px;
    color: var(--text);
    font-size: .78rem;
    font-weight: 750;
}

body#observation .edit-field-input {
    width: 100%;
    margin-top: 6px;
    padding: 8px 10px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: .9rem;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color .15s ease;
}

body#observation .edit-field-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(18,88,77,.1);
}

body#observation textarea.edit-field-input {
    resize: vertical;
    min-height: 60px;
}

body#observation .edit-media-field {
    display: grid;
    grid-template-columns: minmax(280px, 760px) minmax(170px, auto);
    grid-template-areas:
        "label label"
        "preview action"
        "preview upload"
        "capture capture";
    align-items: start;
    gap: 10px;
    margin-top: 6px;
}

body#observation .edit-media-field.is-replacing > .edit-media-current-label,
body#observation .edit-media-field.is-replacing > .edit-media-preview,
body#observation .edit-media-field.is-replacing > .edit-media-toggle {
    display: none !important;
}

body#observation .edit-media-field.is-replacing > .edit-media-file-button {
    display: none !important;
}

body#observation .edit-media-preview img,
body#observation .edit-media-preview video {
    width: 100%;
    max-height: min(340px, 45vh) !important;
    margin: 0 !important;
    object-fit: contain;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

body#observation .edit-media-preview {
    position: relative;
    grid-area: preview;
    min-width: 0;
    overflow: hidden;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

body#observation .edit-media-field.is-uploading .edit-media-preview::after {
    position: absolute;
    inset: 0;
    display: grid;
    width: 38px;
    height: 38px;
    margin: auto;
    content: "";
    background: rgba(255, 255, 255, .92);
    border: 4px solid rgba(18, 88, 77, .18);
    border-top-color: var(--primary);
    border-radius: 50%;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .14);
    animation: observation-media-spin .75s linear infinite;
}

body#observation .edit-media-preview audio {
    width: 100%;
}

body#observation .edit-media-upload {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
}

/* Editor de multimedia: orixinal visible + botóns capturar/subir */
body#observation .edit-media-current-label {
    grid-area: label;
    margin: 0;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
}

body#observation .edit-media-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body#observation .edit-media-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    cursor: pointer;
}

body#observation .edit-media-btn .material-symbols-outlined {
    font-size: 19px;
}

/* Botón para amosar os widgets de captura (iguais aos da creación) */
body#observation .edit-media-toggle {
    grid-area: action;
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0;
}

body#observation .edit-media-file-button {
    grid-area: upload;
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0;
    cursor: pointer;
}

/* O partial de imaxe usa un GIF como fondo durante o gardado local. Evitamos
   que as regras de preview o amplíen e substituímolo por un spinner nítido. */
body#observation .edit-media-capture .mediaContainer[style*="media_loading.gif"] {
    position: relative;
    background-image: none !important;
    background-color: var(--surface-2);
}

body#observation .edit-media-capture .mediaContainer[style*="media_loading.gif"]::after {
    width: 38px;
    height: 38px;
    margin: auto;
    content: "";
    border: 4px solid rgba(18, 88, 77, .18);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: observation-media-spin .75s linear infinite;
}

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

body#observation .edit-media-capture {
    position: relative;
    grid-area: capture;
    width: 100%;
    margin-top: 4px;
}

body#observation .edit-media-field.is-replacing.is-uploading .edit-media-capture::before {
    position: absolute;
    z-index: 5;
    inset: 0;
    content: "";
    background: rgba(255, 255, 255, .72);
    border-radius: var(--radius-md);
}

body#observation .edit-media-field.is-replacing.is-uploading .edit-media-capture::after {
    position: absolute;
    z-index: 6;
    inset: 0;
    width: 38px;
    height: 38px;
    margin: auto;
    content: "";
    border: 4px solid rgba(18, 88, 77, .18);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: observation-media-spin .75s linear infinite;
}

body#observation .edit-media-capture .capture-field-card {
    width: 100%;
    margin: 0;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: none;
}

body#observation .edit-media-capture .capture-field-heading {
    display: none;
}

body#observation .edit-media-capture .capture-field-body {
    padding: 10px;
}

body#observation .edit-media-capture .videoCaptureWrapper {
    position: relative;
    display: grid;
    grid-template-rows: minmax(260px, 52vh) auto;
    width: 100%;
    overflow: hidden;
    background: #101417;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
}

body#observation .edit-media-capture .videoCaptureWrapper > .videoCapture {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    margin: 0;
    object-fit: contain;
    background: #101417;
    border: 0;
    border-radius: 0;
    aspect-ratio: auto;
}

body#observation .edit-media-capture .videoCaptureWrapper > .videoCapture.preview {
    display: none;
}

body#observation .edit-media-capture .videoCaptureWrapper > .buttons {
    position: relative;
    inset: auto;
    display: flex;
    width: fit-content;
    max-width: calc(100% - 20px);
    height: auto;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 9px auto 10px;
    padding: 6px 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
}

body#observation .edit-media-capture .videoCaptureWrapper > .buttons .withIcon,
body#observation .edit-media-capture .videoCaptureWrapper > .buttons label .withIcon {
    display: grid;
    width: 46px;
    min-width: 46px;
    height: 46px;
    margin: 0;
    padding: 0;
    place-items: center;
    color: var(--primary-dark);
    background: transparent;
    border: 0;
    border-radius: 10px;
    aspect-ratio: 1;
}

body#observation .edit-media-capture .videoCaptureWrapper > .buttons > .withIcon:first-child {
    color: #fff;
    background: var(--primary);
}

body#observation .edit-media-capture [id^="camera-switch-container-"] .withIcon {
    display: grid;
    width: 44px;
    height: 44px;
    padding: 0 !important;
    place-items: center;
    color: #fff;
    border-radius: 50% !important;
    aspect-ratio: 1;
}

@media (max-width: 600px) {
    body#observation .edit-media-field {
        grid-template-columns: 1fr;
        grid-template-areas:
            "label"
            "preview"
            "action"
            "upload"
            "capture";
    }

    body#observation .edit-fields-controls {
        margin-right: -14px;
        margin-bottom: -14px;
        margin-left: -14px;
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    }

    body#observation .edit-fields-controls .button {
        min-width: 0;
        flex: 1 1 0;
    }

    body#observation .edit-media-capture .videoCaptureWrapper {
        grid-template-rows: minmax(240px, 48vh) auto;
    }
}

/* Editor de data/hora en modo edición */
body#observation .observation-date-edit {
    padding: 7px 10px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: inherit;
    font-size: .9rem;
}

/* Borrar comentario (só o autor da observación o ve) */
body#observation #comments.can-moderate li {
    grid-template-columns: 42px minmax(0, 1fr) auto;
}

body#observation #comments .comment-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    color: var(--text-muted);
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    opacity: .75;
    transition: background .15s ease, color .15s ease, opacity .15s ease;
}

body#observation #comments .comment-delete:hover {
    color: #c0392b;
    background: rgba(192, 57, 43, .1);
    opacity: 1;
}

/* Estado de gravación compartido polo asistente e polo editor de observación. */
body#field .video-recording-indicator,
body#observation .edit-media-capture .video-recording-indicator {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 8;
    display: inline-flex;
    width: auto;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    color: #fff;
    background: rgba(125, 20, 24, .9);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    box-shadow: 0 5px 16px rgba(70, 8, 12, .3);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    font-size: .72rem;
    line-height: 1;
    letter-spacing: .06em;
    pointer-events: none;
}

body#field .video-recording-indicator[hidden],
body#observation .edit-media-capture .video-recording-indicator[hidden] {
    display: none !important;
}

.video-recording-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    background: #ff5b62;
    border: 2px solid rgba(255, 255, 255, .82);
    border-radius: 50%;
    animation: peneira-rec-pulse 1.1s ease-in-out infinite;
}

.video-recording-time {
    min-width: 38px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}

body#field .videoCaptureWrapper.is-recording,
body#observation .edit-media-capture .videoCaptureWrapper.is-recording {
    border-color: rgba(190, 42, 48, .7) !important;
    box-shadow: 0 0 0 3px rgba(190, 42, 48, .11);
}

body#field .videoCaptureWrapper.is-recording [id^="camera-switch-container-"],
body#observation .edit-media-capture .videoCaptureWrapper.is-recording [id^="camera-switch-container-"] {
    opacity: 0;
    pointer-events: none;
}

body#field .videoCaptureWrapper .buttons > .withIcon[aria-pressed="true"],
body#observation .edit-media-capture .videoCaptureWrapper .buttons > .withIcon[aria-pressed="true"] {
    color: #fff !important;
    background: #b62d34 !important;
    box-shadow: 0 4px 12px rgba(130, 18, 24, .3);
}

@keyframes peneira-rec-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .45; transform: scale(.72); }
}

/* Instalación PWA: promoción contextual e discreta no perfil do usuario. */
body#user .pwa-install-promotion[hidden],
body#user .pwa-install-promotion [hidden] {
    display: none !important;
}

body#user .pwa-install-promotion {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    color: var(--text);
    background: linear-gradient(135deg, rgba(235, 247, 242, .96), rgba(245, 250, 248, .96));
    border: 1px solid rgba(18, 88, 77, .18);
    border-radius: var(--radius-md);
    box-shadow: 0 5px 16px rgba(12, 61, 54, .08);
}

body#user .pwa-install-promotion-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: #fff;
    background: var(--gradient-primary);
    border-radius: 12px;
    font-size: 23px;
    box-shadow: var(--shadow-brand-sm);
}

body#user .pwa-install-promotion-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

body#user .pwa-install-promotion-copy strong {
    color: var(--primary-dark);
    font-size: .9rem;
}

body#user .pwa-install-promotion-copy > span {
    color: var(--text-muted);
    font-size: .78rem;
    line-height: 1.4;
}

body#user .pwa-install-ios-steps {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    color: var(--primary-dark) !important;
    font-weight: 650;
}

body#user .pwa-install-ios-steps .material-symbols-outlined {
    font-size: 18px;
}

body#user .pwa-install-promotion-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

body#user .pwa-install-action {
    width: auto;
    min-height: 38px;
    gap: 6px;
    margin: 0;
    padding: 8px 13px;
    border-radius: 10px;
    font-size: .8rem;
}

body#user .pwa-install-action .material-symbols-outlined {
    font-size: 18px;
}

body#user .pwa-install-dismiss {
    width: auto;
    min-height: 36px;
    margin: 0;
    padding: 7px 9px;
    color: var(--text-muted) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: .76rem;
    white-space: nowrap;
}

body#user .pwa-install-dismiss:hover {
    color: var(--primary-dark) !important;
    background: rgba(18, 88, 77, .06) !important;
    transform: none !important;
}

@media (max-width: 600px) {
    body#user .pwa-install-promotion {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 10px;
        padding: 12px;
    }

    body#user .pwa-install-promotion-actions {
        grid-column: 2;
        justify-content: flex-start;
    }
}

/* Login de escritorio compacto: cabe en portátiles e ventás pouco altas. */
@media (min-width: 601px) {
    body#login {
        padding: 12px 20px !important;
    }

    body#login #wrapper {
        width: min(100%, 400px) !important;
        max-height: calc(100dvh - 24px);
        padding: 20px 30px 18px;
        overflow-y: auto;
        justify-content: flex-start !important;
    }

    body#login .logo {
        margin-bottom: 3px !important;
    }

    body#login .login-logo {
        width: 154px;
        height: 154px;
        margin: -8px auto -4px;
    }

    body#login #loginForm {
        gap: 2px;
    }

    body#login .login-field label {
        min-height: 21px;
        margin: 2px 0 3px !important;
        font-size: .8rem;
    }

    body#login .login-field label .material-symbols-outlined {
        width: 24px;
        height: 24px;
        font-size: 19px;
    }

    body#login #loginForm input {
        height: 42px;
        margin: 0 0 8px !important;
    }

    body#login .password-toggle {
        top: 21px;
        width: 38px !important;
        height: 38px !important;
    }

    body#login #loginForm .buttons {
        margin: 0;
    }

    body#login #loginForm #loginButton {
        height: 43px;
        margin: 5px 0 4px;
    }

    body#login .login-links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1px 12px;
        margin-top: 1px;
    }

    body#login .login-link {
        width: auto !important;
        padding: 2px 0 !important;
        font-size: .76rem;
    }

    body#login .login-links #privacy {
        grid-column: 1 / -1;
        width: auto !important;
        justify-self: center;
    }
}

@media (min-width: 601px) and (max-height: 680px) {
    body#login #wrapper {
        padding: 13px 28px 12px;
    }

    body#login .login-logo {
        width: 112px;
        height: 112px;
    }

    body#login #loginForm input {
        height: 39px;
        margin-bottom: 5px !important;
    }

    body#login #loginForm #loginButton {
        height: 40px;
    }

    body#login .login-link {
        padding-block: 0 !important;
        font-size: .72rem;
    }

    body#login footer {
        padding: 3px 9px;
    }
}

body#observation #comments .comment-delete .material-symbols-outlined {
    font-size: 19px;
}

/* Confirmacións: sempre centradas dentro do viewport visible en móbil. */
body#userManagement .user-action-confirm {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

body#userManagement .user-action-confirm-dialog {
    max-height: calc(100dvh - 24px);
}

/* Borrado de categoría: mesmo patrón visual ca o resto de confirmacións. */
body#topic #confirmDelete {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2000;
    width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 3vw, 40px);
    overflow: hidden;
}

body#topic #confirmDelete .topic-delete-dialog {
    position: relative;
    display: flex;
    width: min(560px, 100%);
    max-width: 560px;
    max-height: calc(100dvh - 24px);
    flex-direction: column;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: var(--radius-lg) !important;
}

body#topic #confirmDelete .topic-delete-header {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 20px 68px 20px 24px;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border);
}

body#topic #confirmDelete .topic-delete-header > .material-symbols-outlined {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    color: var(--danger);
    background: var(--danger-bg);
    border: 1px solid #e8caca;
    border-radius: 50%;
    font-size: 20px;
}

body#topic #confirmDelete .topic-delete-header h2 {
    margin: 0 0 2px;
    color: var(--text) !important;
    font-size: 1.08rem;
}

body#topic #confirmDelete .topic-delete-header p,
body#topic #confirmDelete .topic-delete-body p {
    margin: 0;
    color: var(--text-muted);
    font-size: .86rem;
    line-height: 1.5;
}

body#topic #confirmDelete .topic-delete-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    padding: 22px 24px;
}

body#topic #confirmDelete .topic-delete-warning {
    padding: 12px 14px;
    color: var(--danger-text) !important;
    background: var(--danger-bg);
    border: 1px solid #e8caca;
    border-radius: var(--radius-sm);
}

body#topic #confirmDelete .topic-delete-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 24px;
    background: var(--surface-1);
    border-top: 1px solid var(--border);
}

body#topic #confirmDelete .topic-delete-actions .button {
    display: inline-flex;
    width: auto;
    min-width: 112px;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0 !important;
    padding: 9px 14px !important;
    text-decoration: none;
}

body#topic #confirmDelete .topic-delete-dialog > .close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 34px;
    height: 34px;
    min-height: 34px;
    margin: 0;
    padding: 0;
    appearance: none;
    background-image: none !important;
    background-color: var(--surface) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 50%;
    z-index: 5;
}

body#topic #confirmDelete .topic-delete-dialog > .close::before,
body#topic #confirmDelete .topic-delete-dialog > .close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 2px;
    background: var(--text-soft);
    border-radius: 2px;
}

body#topic #confirmDelete .topic-delete-dialog > .close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

body#topic #confirmDelete .topic-delete-dialog > .close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

@media (max-width: 600px) {
    body#userManagement .user-action-confirm,
    body#topic #confirmDelete {
        align-items: center;
        padding: max(8px, env(safe-area-inset-top)) 6px max(8px, env(safe-area-inset-bottom));
    }

    body#userManagement .user-action-confirm-dialog,
    body#topic #confirmDelete .topic-delete-dialog {
        width: 100%;
        max-height: calc(100dvh - max(16px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
        border-radius: var(--radius-md) !important;
    }

    body#topic #confirmDelete .topic-delete-header {
        padding: 16px 58px 16px 16px;
    }

    body#topic #confirmDelete .topic-delete-body {
        padding: 18px 16px;
    }

    body#topic #confirmDelete .topic-delete-actions {
        padding: 12px 16px;
    }

    body#topic #confirmDelete .topic-delete-actions .button {
        min-width: 0;
        flex: 1 1 0;
    }

    .community-project-card-badges {
        top: 10px;
        right: 10px;
        left: 10px;
        gap: 6px;
    }

    .community-project-card-badges .community-featured-badge,
    .community-project-card-badges .community-open-badge {
        padding: 6px 9px;
        font-size: .7rem;
    }
}

/* O editor móbil ten un único contedor desprazable. Evita que a grella inclúa
   a fila do footer e cree unha páxina baleira tras cambiar a visibilidade. */
@media (max-width: 959px) {
    body#newTopic > section#content > main {
        grid-row: 2 / 3 !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-anchor: none;
        overscroll-behavior-y: auto;
        touch-action: pan-y;
    }

    body#newTopic main .content.topic-editor:not(.is-creation-flow) {
        min-height: 0 !important;
        padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
    }
}

/* =========================================================================
   Community map — public observation card popup
   ========================================================================= */
body#community .community-observation-leaflet-popup .leaflet-popup-content-wrapper {
    padding: 0;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid rgba(18, 88, 77, .18);
    border-radius: 20px;
    box-shadow: 0 22px 52px rgba(7, 34, 30, .24), 0 5px 15px rgba(7, 34, 30, .12);
}

body#community .community-observation-leaflet-popup .leaflet-popup-content {
    margin: 0;
    color: var(--text);
    line-height: 1.4;
}

body#community .community-observation-leaflet-popup .leaflet-popup-tip {
    background: var(--surface);
    border-right: 1px solid rgba(18, 88, 77, .14);
    border-bottom: 1px solid rgba(18, 88, 77, .14);
    box-shadow: 5px 5px 12px rgba(7, 34, 30, .10);
}

body#community .community-observation-leaflet-popup a.leaflet-popup-close-button {
    top: 10px;
    right: 10px;
    z-index: 6;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    padding: 0;
    color: var(--primary-dark);
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(18, 88, 77, .16);
    border-radius: 50%;
    box-shadow: 0 5px 14px rgba(7, 34, 30, .14);
    font: 0/0 a;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body#community .community-observation-leaflet-popup a.leaflet-popup-close-button::before,
body#community .community-observation-leaflet-popup a.leaflet-popup-close-button::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
}

body#community .community-observation-leaflet-popup a.leaflet-popup-close-button::before {
    transform: rotate(45deg);
}

body#community .community-observation-leaflet-popup a.leaflet-popup-close-button::after {
    transform: rotate(-45deg);
}

body#community .community-marker-popup {
    position: relative;
    display: grid;
    grid-template-columns: 188px minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    overflow: hidden;
    background: var(--surface);
}

body#community .community-marker-image {
    position: relative;
    display: block;
    height: 100%;
    min-height: 190px;
    overflow: hidden;
    background: var(--gradient-primary);
}

body#community .community-marker-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 34, 30, .02) 45%, rgba(7, 34, 30, .54) 100%);
    pointer-events: none;
}

body#community .markerPopup .community-marker-image img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    border-radius: 0;
    transition: transform .35s ease;
}

body#community .community-marker-image:hover img {
    transform: scale(1.035);
}

body#community .community-marker-image-badge,
body#community .community-marker-media-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .68rem;
    font-weight: 750;
    letter-spacing: .045em;
    text-transform: uppercase;
}

body#community .community-marker-image-badge {
    position: absolute;
    z-index: 2;
    left: 10px;
    bottom: 10px;
    padding: 6px 9px;
    color: #fff;
    background: rgba(7, 64, 55, .82);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

body#community .community-marker-image-badge .material-symbols-outlined,
body#community .community-marker-media-label .material-symbols-outlined {
    font-size: 15px;
}

body#community .community-marker-audio {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 190px;
    padding: 18px 12px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 88% 10%, rgba(0, 200, 166, .34), transparent 38%),
        linear-gradient(140deg, #0c3d36 0%, #12584d 58%, #1c7a6b 100%);
}

body#community .community-marker-audio::after {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    right: -76px;
    bottom: -95px;
    border: 22px solid rgba(255, 255, 255, .055);
    border-radius: 50%;
}

body#community .community-marker-audio .play-button {
    position: relative;
    z-index: 2;
    display: grid;
    width: 50px;
    height: 50px;
    min-height: 50px;
    place-items: center;
    margin: 0;
    padding: 0;
    background: var(--accent);
    border: 5px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    box-shadow: 0 9px 22px rgba(0, 0, 0, .26);
    cursor: pointer;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

body#community .community-marker-audio .play-button:hover {
    background: #09d3b1;
    transform: scale(1.05);
}

body#community .community-marker-audio .play-button::before {
    content: "";
    width: 0;
    height: 0;
    margin-left: 4px;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 14px solid #fff;
}

body#community .community-marker-audio .play-button.paused::before {
    width: 12px;
    height: 17px;
    margin-left: 0;
    border: 0;
    border-right: 4px solid #fff;
    border-left: 4px solid #fff;
}

body#community .community-marker-audio.playing .play-button {
    animation: audioPulse 1.2s infinite ease-out;
}

body#community .community-marker-audio-info {
    position: relative;
    z-index: 2;
    min-width: 0;
    width: 100%;
    text-align: center;
}

body#community .community-marker-media-label {
    justify-content: center;
    margin-bottom: 7px;
    color: rgba(255, 255, 255, .88);
}

body#community .community-marker-wave {
    display: flex;
    height: 22px;
    justify-content: center;
    align-items: center;
    gap: 3px;
    overflow: hidden;
}

body#community .community-marker-wave i {
    width: 2px;
    height: var(--height);
    flex: 0 0 2px;
    background: rgba(255, 255, 255, .78);
    border-radius: 999px;
    transform-origin: center;
}

body#community .community-marker-audio.playing .community-marker-wave i {
    animation: communityAudioWave .7s ease-in-out infinite alternate;
    animation-delay: calc(var(--bar) * -45ms);
}

@keyframes communityAudioWave {
    from { transform: scaleY(.45); opacity: .55; }
    to { transform: scaleY(1.15); opacity: 1; }
}

body#community .community-marker-body {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    padding: 15px 52px 15px 15px;
}

body#community .community-marker-meta {
    display: grid;
    gap: 7px;
}

body#community .community-marker-meta-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 7px 8px;
    color: inherit;
    background: var(--surface-1);
    border: 1px solid var(--border-soft);
    border-radius: 11px;
    text-decoration: none;
}

body#community a.community-marker-project:hover {
    color: inherit;
    background: var(--brand-tint);
    border-color: rgba(18, 88, 77, .24);
}

body#community .community-marker-meta-row > .material-symbols-outlined {
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    color: var(--primary);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 9px;
    font-size: 16px;
}

body#community .community-marker-meta-row > span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

body#community .community-marker-meta-row small {
    color: var(--text-muted);
    font-size: .65rem;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: .05em;
}

body#community .community-marker-meta-row strong {
    overflow: hidden;
    color: var(--text);
    font-size: .8rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body#community .community-marker-context {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 13px;
    margin: 9px 2px 0;
    color: var(--text-muted);
    font-size: .7rem;
}

body#community .community-marker-context > span {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 4px;
}

body#community .community-marker-context .material-symbols-outlined {
    color: var(--accent-dark);
    font-size: 15px;
}

body#community .community-marker-arrow {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: grid;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #fff !important;
    background: var(--gradient-primary);
    border: 1px solid var(--primary-dark);
    border-radius: 50%;
    box-shadow: 0 5px 13px rgba(12, 61, 54, .20);
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}

body#community .community-marker-arrow:hover {
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(12, 61, 54, .28);
    transform: translateY(-1px);
}

body#community .community-marker-arrow .material-symbols-outlined {
    font-size: 18px;
}

@media (max-width: 480px) {
    body#community .community-observation-leaflet-popup .leaflet-popup-content-wrapper {
        border-radius: 16px;
    }

    body#community .community-marker-image {
        min-height: 178px;
    }

    body#community .community-marker-audio {
        min-height: 178px;
        padding: 15px 8px;
    }

    body#community .community-marker-body {
        padding: 11px 43px 11px 10px;
    }

    body#community .community-marker-popup {
        grid-template-columns: 126px minmax(0, 1fr);
    }

    body#community .community-marker-meta-row {
        grid-template-columns: 24px minmax(0, 1fr);
        gap: 7px;
        padding: 6px;
    }

    body#community .community-marker-meta-row > .material-symbols-outlined {
        width: 24px;
        height: 24px;
        font-size: 14px;
    }

    body#community .community-marker-image-badge {
        left: 7px;
        bottom: 7px;
        padding: 5px 7px;
        font-size: .6rem;
    }

body#community .community-marker-wave i:nth-child(n + 13) {
        display: none;
    }
}

/* =========================================================================
   App maps — observation detail card popup
   ========================================================================= */
.app-observation-leaflet-popup .leaflet-popup-content-wrapper {
    padding: 0;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid rgba(18, 88, 77, .20);
    border-radius: 20px;
    box-shadow: 0 22px 52px rgba(7, 34, 30, .24), 0 5px 15px rgba(7, 34, 30, .12);
}

.app-observation-leaflet-popup .leaflet-popup-content {
    margin: 0;
    color: var(--text);
    line-height: 1.4;
}

.app-observation-leaflet-popup .leaflet-popup-tip {
    background: var(--surface);
    border-right: 1px solid rgba(18, 88, 77, .14);
    border-bottom: 1px solid rgba(18, 88, 77, .14);
    box-shadow: 5px 5px 12px rgba(7, 34, 30, .10);
}

.app-observation-leaflet-popup a.leaflet-popup-close-button {
    top: 9px;
    right: 9px;
    z-index: 8;
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    padding: 0;
    color: var(--primary-dark);
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(18, 88, 77, .16);
    border-radius: 50%;
    box-shadow: 0 5px 14px rgba(7, 34, 30, .14);
    font: 0/0 a;
}

.app-observation-leaflet-popup a.leaflet-popup-close-button::before,
.app-observation-leaflet-popup a.leaflet-popup-close-button::after {
    content: "";
    position: absolute;
    width: 13px;
    height: 2px;
    background: currentColor;
    border-radius: 999px;
}

.app-observation-leaflet-popup a.leaflet-popup-close-button::before {
    transform: rotate(45deg);
}

.app-observation-leaflet-popup a.leaflet-popup-close-button::after {
    transform: rotate(-45deg);
}

.app-observation-leaflet-popup .app-marker-popup {
    position: relative;
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    overflow: hidden;
    background: var(--surface);
}

.app-observation-leaflet-popup .app-marker-media {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 218px;
    overflow: hidden;
    color: #fff;
    background: var(--gradient-primary);
    text-decoration: none;
}

.app-observation-leaflet-popup .app-marker-image img,
.app-observation-leaflet-popup .app-marker-video video {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 218px;
    margin: 0;
    object-fit: cover;
    border-radius: 0;
}

.app-observation-leaflet-popup .app-marker-video video {
    background: #082e29;
}

.app-observation-leaflet-popup .app-marker-video .app-marker-media-label {
    top: 10px;
    bottom: auto;
}

.app-observation-leaflet-popup .app-marker-image::after,
.app-observation-leaflet-popup .app-marker-video::after {
    content: "";
    position: absolute;
    inset: 45% 0 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(4, 35, 30, .72));
}

.app-observation-leaflet-popup .app-marker-media-label {
    position: absolute;
    z-index: 2;
    left: 10px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: calc(100% - 20px);
    padding: 6px 9px;
    color: #fff;
    background: rgba(9, 73, 63, .90);
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 760;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .035em;
}

.app-observation-leaflet-popup .app-marker-media-label .material-symbols-outlined {
    font-size: 15px;
}

.app-observation-leaflet-popup .app-marker-audio {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 13px;
    padding: 20px 12px 48px;
    background:
        radial-gradient(circle at 25% 18%, rgba(0, 200, 166, .34), transparent 38%),
        linear-gradient(155deg, #1b806e, #0c3d36 74%);
}

.app-observation-leaflet-popup .app-marker-audio .play-button {
    position: relative;
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    padding: 0;
    background: #fff !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: 0 10px 24px rgba(2, 24, 20, .28) !important;
    cursor: pointer;
}

.app-observation-leaflet-popup .app-marker-audio .play-button::before {
    content: "";
    width: 0;
    height: 0;
    margin-left: 4px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 13px solid var(--primary);
}

.app-observation-leaflet-popup .app-marker-audio .play-button.paused::before {
    width: 12px;
    height: 16px;
    margin-left: 0;
    border: 0;
    border-right: 4px solid var(--primary);
    border-left: 4px solid var(--primary);
}

.app-observation-leaflet-popup .app-marker-wave {
    display: flex;
    height: 34px;
    align-items: center;
    gap: 3px;
}

.app-observation-leaflet-popup .app-marker-wave i {
    display: block;
    width: 3px;
    height: var(--height);
    background: rgba(255, 255, 255, .72);
    border-radius: 999px;
}

.app-observation-leaflet-popup .app-marker-audio.playing .app-marker-wave i {
    animation: appMarkerWave .75s ease-in-out infinite alternate;
}

.app-observation-leaflet-popup .app-marker-audio.playing .app-marker-wave i:nth-child(3n) {
    animation-delay: -.3s;
}

@keyframes appMarkerWave {
    to { transform: scaleY(.38); opacity: .5; }
}

.app-observation-leaflet-popup .app-marker-body {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    padding: 14px 48px 13px 14px;
}

.app-observation-leaflet-popup .app-marker-heading {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    margin: 0 0 8px;
    color: var(--primary-dark);
}

.app-observation-leaflet-popup .app-marker-heading .material-symbols-outlined {
    flex: 0 0 auto;
    font-size: 18px;
    color: var(--accent-dark);
}

.app-observation-leaflet-popup .app-marker-heading strong {
    overflow: hidden;
    font-size: .91rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-observation-leaflet-popup .app-marker-meta {
    display: grid;
    gap: 6px;
}

.app-observation-leaflet-popup .app-marker-meta-row {
    display: grid;
    grid-template-columns: 27px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 6px 7px;
    background: var(--surface-1);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
}

.app-observation-leaflet-popup .app-marker-meta-row > .material-symbols-outlined {
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    color: var(--primary);
    background: var(--brand-tint);
    border-radius: 8px;
    font-size: 16px;
}

.app-observation-leaflet-popup .app-marker-meta-row > span:last-child {
    min-width: 0;
}

.app-observation-leaflet-popup .app-marker-meta-row small,
.app-observation-leaflet-popup .app-marker-meta-row strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-observation-leaflet-popup .app-marker-meta-row small {
    margin-bottom: 1px;
    color: var(--text-subtle);
    font-size: .57rem;
    font-weight: 760;
    text-transform: uppercase;
    letter-spacing: .055em;
}

.app-observation-leaflet-popup .app-marker-meta-row strong {
    color: var(--text);
    font-size: .74rem;
    line-height: 1.2;
}

.app-observation-leaflet-popup .app-marker-context {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 11px;
    margin: 8px 2px 0;
    color: var(--text-muted);
    font-size: .65rem;
}

.app-observation-leaflet-popup .app-marker-context > span {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 4px;
}

.app-observation-leaflet-popup .app-marker-context .material-symbols-outlined {
    font-size: 14px;
    color: var(--accent-dark);
}

.app-observation-leaflet-popup .app-marker-fields {
    display: grid;
    gap: 4px;
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid var(--border-soft);
}

.app-observation-leaflet-popup .app-marker-fields p {
    display: flex;
    min-width: 0;
    gap: 5px;
    margin: 0;
    color: var(--text-muted);
    font-size: .64rem;
    line-height: 1.3;
}

.app-observation-leaflet-popup .app-marker-fields strong {
    flex: 0 0 auto;
    max-width: 42%;
    overflow: hidden;
    color: var(--text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-observation-leaflet-popup .app-marker-fields strong::after {
    content: ":";
}

.app-observation-leaflet-popup .app-marker-fields span {
    display: -webkit-box;
    min-width: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.app-observation-leaflet-popup .app-marker-arrow {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 3;
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    padding: 0;
    color: #fff !important;
    background: var(--gradient-primary);
    border: 1px solid var(--primary-dark);
    border-radius: 50%;
    box-shadow: 0 5px 13px rgba(12, 61, 54, .20);
    text-decoration: none;
}

.app-observation-leaflet-popup .app-marker-arrow .material-symbols-outlined {
    font-size: 18px;
}

@media (max-width: 480px) {
    .app-observation-leaflet-popup .leaflet-popup-content-wrapper {
        border-radius: 16px;
    }

    .app-observation-leaflet-popup .app-marker-popup {
        grid-template-columns: 112px minmax(0, 1fr);
    }

    .app-observation-leaflet-popup .app-marker-media,
    .app-observation-leaflet-popup .app-marker-image img,
    .app-observation-leaflet-popup .app-marker-video video {
        min-height: 205px;
    }

    .app-observation-leaflet-popup .app-marker-body {
        padding: 11px 42px 11px 9px;
    }

    .app-observation-leaflet-popup .app-marker-heading {
        margin-bottom: 6px;
    }

    .app-observation-leaflet-popup .app-marker-meta-row {
        grid-template-columns: 23px minmax(0, 1fr);
        gap: 6px;
        padding: 5px;
    }

    .app-observation-leaflet-popup .app-marker-meta-row > .material-symbols-outlined {
        width: 23px;
        height: 23px;
        font-size: 14px;
    }

    .app-observation-leaflet-popup .app-marker-context {
        gap: 4px 8px;
        margin-top: 6px;
    }

    .app-observation-leaflet-popup .app-marker-fields {
        margin-top: 6px;
        padding-top: 5px;
    }

    .app-observation-leaflet-popup .app-marker-fields p:nth-child(n + 2) {
        display: none;
    }

    .app-observation-leaflet-popup .app-marker-media-label {
        left: 7px;
        bottom: 7px;
        max-width: calc(100% - 14px);
        padding: 5px 7px;
        font-size: .56rem;
    }

    .app-observation-leaflet-popup .app-marker-wave i:nth-child(n + 11) {
        display: none;
    }
}

/* Community — grella máis densa para amosar catro proxectos por fila. As
   categorías do detalle conservan o seu tamaño actual. */
@media (min-width: 769px) {
    body#community.community-projects-page .community-projects-grid:not(.community-topics-grid) {
        gap: 18px;
    }

    body#community.community-projects-page .community-projects-grid:not(.community-topics-grid) > .community-project-card .community-project-card-image {
        height: 158px;
    }

    body#community.community-projects-page .community-projects-grid:not(.community-topics-grid) > .community-project-card .community-project-card-body {
        padding: 16px 16px 14px;
    }

    body#community.community-projects-page .community-projects-grid:not(.community-topics-grid) > .community-project-card .community-project-card-body h3 {
        font-size: 1rem;
    }

    body#community.community-projects-page .community-projects-grid:not(.community-topics-grid) > .community-project-card .community-project-card-body p {
        font-size: .81rem;
        line-height: 1.48;
    }

    body#community.community-projects-page .community-projects-grid:not(.community-topics-grid) > .community-project-card .community-project-card-footer {
        gap: 8px;
        padding: 10px 14px;
    }

    body#community.community-projects-page .community-projects-grid:not(.community-topics-grid) > .community-project-card .community-project-card-meta {
        gap: 8px;
        font-size: .72rem;
    }
}

@media (min-width: 1200px) {
    body#community.community-projects-page .community-projects-grid:not(.community-topics-grid) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 900px) and (max-width: 1199px) {
    body#community.community-projects-page .community-projects-grid:not(.community-topics-grid) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 769px) and (max-width: 899px) {
    body#community.community-projects-page .community-projects-grid:not(.community-topics-grid) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* As ligazóns xerais non deben cambiar a verde o texto do CTA sobre fondo verde. */
.community-topic-observe:not(.community-topic-observe-locked):hover,
.community-topic-observe:not(.community-topic-observe-locked):focus-visible {
    color: #fff !important;
}

.community-topic-observe:not(.community-topic-observe-locked):hover .material-symbols-outlined,
.community-topic-observe:not(.community-topic-observe-locked):focus-visible .material-symbols-outlined {
    color: #fff !important;
}

/* As barras de acción do asistente son fixas en móbil. Reservamos espazo ao
   final da área desprazable para que a última opción nunca quede tapada. */
@media (max-width: 959px) {
    body#newProject #newProjectBody,
    body#newTopic #newTopicBody {
        height: auto !important;
        min-height: 100%;
        flex: 0 0 auto;
        padding-bottom: calc(132px + env(safe-area-inset-bottom)) !important;
    }

    body#newProject main,
    body#newTopic main {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }

    body#newProject form textarea,
    body#newTopic form textarea {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}