h1:focus {
    outline: none;
}

.gestor-scope-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.65rem;
    margin-bottom: 0.75rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid color-mix(in srgb, var(--gestor-warning-text, #5a4300) 28%, transparent);
    border-radius: 8px;
    background: var(--gestor-warning-background, #fff4cc);
    color: var(--gestor-warning-text, #5a4300);
    font-size: 0.86rem;
}

.gestor-scope-banner a {
    margin-left: auto;
    color: inherit;
}

.gestor-scope-description {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.4rem;
    align-items: center;
    margin-right: auto;
}

.gestor-scope-context {
    color: inherit;
    opacity: 0.78;
}

.gestor-scope-quick-select {
    width: auto;
    min-width: 12rem;
    max-width: 20rem;
    min-height: 1.9rem;
}

@media (max-width: 720px) {
    .gestor-scope-quick-select {
        order: 2;
        width: 100%;
        max-width: none;
    }
}

.gestor-scope-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    margin-bottom: 0.55rem;
    color: var(--workspace-muted, #6f6f69);
    font-size: 0.82rem;
}

.scope-search {
    margin: 0;
}

.scope-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
    align-items: end;
    margin-bottom: 0.75rem;
}

.scope-saved-panel {
    margin-bottom: 0.85rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--workspace-border, #e3e3df);
    border-radius: var(--gestor-control-radius, 8px);
    background: var(--workspace-soft, #f8f8f6);
}

.scope-saved-panel h3 {
    margin: 0 0 0.55rem;
    font-size: 0.95rem;
}

.scope-saved-grid {
    display: grid;
    grid-template-columns: minmax(13rem, 1fr) minmax(13rem, 1fr);
    gap: 0.65rem;
}

.scope-saved-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.55rem;
}

.scope-project-list {
    display: grid;
    gap: 0.55rem;
    max-height: min(58vh, 34rem);
    overflow: auto;
    padding-right: 0.25rem;
}

.scope-project-item {
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--workspace-border, #e3e3df);
    border-radius: var(--gestor-control-radius, 8px);
    background: var(--workspace-soft, #f8f8f6);
}

.scope-project-heading {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
}

.scope-project-heading span {
    color: var(--workspace-muted, #6f6f69);
}

.scope-project-heading .scope-project-inactive {
    margin-left: auto;
    padding: var(--gestor-label-padding-v, .12rem) var(--gestor-label-padding-h, .45rem);
    border: var(--gestor-label-border-width, 1px) solid currentColor;
    border-radius: var(--gestor-label-radius, 999px);
    background: var(--gestor-inactive-bg, #fff3d8);
    color: var(--gestor-inactive-text, #7c5700);
    font-size: 0.72rem;
    font-weight: 600;
}

.scope-status-filter {
    margin-bottom: 0.65rem;
}

.project-activity-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--gestor-label-padding-v, .12rem) var(--gestor-label-padding-h, .45rem);
    border: var(--gestor-label-border-width, 1px) solid currentColor;
    border-radius: var(--gestor-label-radius, 999px);
    font-size: 0.72rem;
    font-weight: 500;
}

.project-activity-badge.is-active {
    color: var(--gestor-active-text, #246b34);
    background: var(--gestor-active-bg, #e6f5e9);
}

.project-activity-badge.is-inactive {
    color: var(--gestor-inactive-text, #7c5700);
    background: var(--gestor-inactive-bg, #fff3d8);
}

@media (max-width: 980px) {
    .scope-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .scope-filter-grid {
        grid-template-columns: 1fr;
    }

    .scope-filter-placeholder {
        display: none;
    }
}

.menu-order-settings {
    min-width: 0;
}

.menu-order-list {
    display: grid;
    gap: 0.4rem;
    margin-top: 0.8rem;
}

.menu-order-item {
    display: grid;
    grid-template-columns: auto 2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--workspace-border, #e3e3df);
    border-radius: var(--gestor-control-radius, 8px);
    background: var(--gestor-main-background, #fff);
    cursor: grab;
}

.menu-order-item:active {
    cursor: grabbing;
}

.menu-order-item.is-dragging {
    border-color: var(--gestor-accent-color, #822222);
    opacity: 0.58;
}

.menu-order-handle {
    color: var(--workspace-muted, #6f6f69);
    font-weight: 700;
    letter-spacing: -0.15rem;
}

.menu-order-position {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--gestor-accent-color, #822222) 8%, var(--gestor-main-background, #fff));
    color: var(--gestor-accent-color, #822222);
    font-weight: 700;
}

.menu-order-label {
    display: grid;
    min-width: 0;
}

.menu-order-label small {
    overflow: hidden;
    color: var(--workspace-muted, #6f6f69);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-order-actions {
    display: inline-flex;
    gap: 0.3rem;
}

.menu-order-preview {
    overflow-y: auto;
}

.menu-order-preview-main p {
    color: var(--workspace-muted, #6f6f69);
}

@media (max-width: 620px) {
    .menu-order-item {
        grid-template-columns: auto 2rem minmax(0, 1fr);
    }

    .menu-order-actions {
        grid-column: 3;
        justify-content: flex-end;
    }
}

.scope-phase-list {
    margin: 0.55rem 0 0 1.65rem;
    overflow-x: auto;
}

.scope-phase-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--gestor-main-background, #fff);
}

.scope-phase-table th,
.scope-phase-table td {
    padding: 0.32rem 0.45rem;
    border-bottom: 1px solid var(--workspace-border, #e3e3df);
    text-align: left;
    vertical-align: middle;
}

.scope-phase-table th {
    color: var(--workspace-muted, #6f6f69);
    font-size: 0.78rem;
    font-weight: 500;
}

.scope-phase-table tr:last-child td {
    border-bottom: 0;
}

.scope-phase-table .scope-check-column {
    width: 4.5rem;
}

.scope-phase-table .scope-order-column {
    width: 4rem;
}

.scope-order-cell {
    color: var(--workspace-muted, #6f6f69);
    font-variant-numeric: tabular-nums;
}

.scope-all-phases-row {
    background: color-mix(in srgb, var(--gestor-accent-color, #822222) 4%, transparent);
}

.scope-no-phases {
    margin: 0.4rem 0 0;
}

@media (max-width: 720px) {
    .scope-saved-grid {
        grid-template-columns: 1fr;
    }
}

.home-scope-panel {
    margin-bottom: 1rem;
    padding: 0.8rem 1rem;
    border: 1px solid #e3e3df;
    border-radius: 10px;
    background: color-mix(in srgb, var(--gestor-accent-color, #822222) 3%, var(--gestor-main-background, #fff));
}

.home-scope-heading h2,
.home-scope-heading p,
.home-scope-status {
    margin-top: 0;
}

.home-scope-heading p {
    margin-bottom: 0.65rem;
    color: #6f6f69;
}

.home-scope-controls {
    display: grid;
    grid-template-columns: minmax(13rem, 1fr) minmax(13rem, 1fr) auto;
    gap: 0.65rem;
    align-items: end;
}

.home-scope-actions {
    display: flex;
    gap: 0.35rem;
}

.home-scope-status {
    margin-bottom: 0;
    padding-top: 0.55rem;
}

@media (max-width: 820px) {
    .home-scope-controls {
        grid-template-columns: 1fr;
    }

    .gestor-scope-banner a {
        margin-left: 0;
    }
}

/* =========================================================
   ESPACIOS DE TRABAJO: PROYECTOS, TAREAS, NOTAS, AGENDA Y ARCHIVOS
   ========================================================= */

.workspace-page {
    --workspace-border: #e3e3df;
    --workspace-muted: #6f6f69;
    --workspace-soft: #f8f8f6;
    --workspace-shadow: 0 8px 24px rgba(32, 32, 28, 0.055);
    width: 100%;
    min-width: 0;
    padding-bottom: 2rem;
}

.workspace-page > .page-header,
.workspace-page .master-detail-list > .page-header {
    position: relative;
    margin-bottom: 0.8rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--workspace-border);
    border-radius: 12px;
    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--gestor-accent-color, #822222) var(--gestor-gradient-percent, 12%),
                transparent),
            transparent 72%),
        var(--gestor-main-background, #fff);
    box-shadow: var(--workspace-shadow);
}

.workspace-heading {
    min-width: 0;
}

.workspace-heading h1 {
    font-size: clamp(1.45rem, 2.3vw, 1.85rem);
    line-height: 1.15;
}

.workspace-heading p {
    margin: 0.28rem 0 0 2.65rem;
    color: var(--workspace-muted);
    font-size: 0.88rem;
}

.workspace-page > .filter-bar {
    display: inline-flex;
    width: auto;
    padding: 0.22rem;
    border: 1px solid var(--workspace-border);
    border-radius: 9px;
    background: var(--workspace-soft);
}

.workspace-page .btn-primary,
.workspace-page .btn-secondary,
.workspace-page .btn-filter {
    min-height: 34px;
    border-radius: 7px;
    transition:
        transform 100ms ease,
        border-color 120ms ease,
        background-color 120ms ease,
        box-shadow 120ms ease;
}

.workspace-page .btn-primary {
    border-color: var(--gestor-accent-color, #822222);
    background: var(--gestor-accent-color, #822222);
    box-shadow: 0 2px 7px rgba(90, 25, 25, 0.15);
}

.workspace-page .btn-primary:hover {
    border-color: #681b1b;
    background: #681b1b;
}

.workspace-page .btn-primary:active,
.workspace-page .btn-secondary:active,
.workspace-page .btn-filter:active {
    transform: translateY(1px);
}

.workspace-page .btn-secondary:hover {
    border-color: #bdbdb6;
}

.workspace-page .btn-filter {
    min-height: 30px;
    padding: 0.3rem 0.72rem;
    border-color: transparent;
    background: transparent;
}

.workspace-page .btn-filter.active {
    border-color: #d5d5cf;
    background: var(--gestor-main-background, #fff);
    color: var(--gestor-accent-color, #822222);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
}

.workspace-page .mobile-filter-grid {
    padding: 0.9rem;
    border: 1px solid var(--workspace-border);
    border-radius: 10px;
    background: var(--workspace-soft);
}

.workspace-page .mobile-filter-grid .form-group label {
    color: #595954;
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.015em;
}

.workspace-page .mobile-filter-grid input,
.workspace-page .mobile-filter-grid select {
    border-color: #d8d8d2;
    background-color: var(--gestor-main-background, #fff);
}

.workspace-page .mobile-filter-grid input[type="search"] {
    min-height: 42px;
    padding-left: 0.8rem;
    border-radius: 8px;
    font-size: 0.98rem;
}

.workspace-page .mobile-filter-grid input:focus,
.workspace-page .mobile-filter-grid select:focus {
    border-color: var(--gestor-accent-color, #822222);
    box-shadow: 0 0 0 3px rgba(130, 34, 34, 0.09);
}

.workspace-page .data-table {
    border: 1px solid var(--workspace-border);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 10px;
    background: var(--gestor-main-background, #fff);
    box-shadow: var(--workspace-shadow);
}

.workspace-page .data-table thead {
    background: var(--workspace-soft);
}

.workspace-page .data-table th {
    height: 36px;
    border-bottom-color: #d9d9d4;
    color: #595954;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.workspace-page .data-table th:first-child {
    border-top-left-radius: 9px;
}

.workspace-page .data-table th:last-child {
    border-top-right-radius: 9px;
}

.workspace-page .data-table td {
    transition: background-color 100ms ease;
}

.workspace-page .data-table tbody tr:last-child td {
    border-bottom: 0;
}

.workspace-page .data-table tbody tr:hover td {
    background: rgba(130, 34, 34, 0.035);
}

.workspace-page .table-link {
    font-weight: 650;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

.workspace-page .empty-message {
    margin: 0.8rem 0 0;
    padding: 1.4rem;
    border: 1px dashed #d2d2cc;
    border-radius: 10px;
    background: var(--workspace-soft);
    color: var(--workspace-muted);
    text-align: center;
}

.archivos-workspace .archivos-view-bar {
    padding: 0.35rem;
    border: 1px solid var(--workspace-border);
    border-radius: 9px;
    background: var(--workspace-soft);
}

.archivos-workspace .archivo-explorer {
    overflow: hidden;
    border: 1px solid var(--workspace-border);
    border-radius: 10px;
    background: var(--gestor-main-background, #fff);
    box-shadow: var(--workspace-shadow);
}

.archivos-workspace .archivo-explorer-row {
    min-height: 36px;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

.archivos-workspace .archivo-explorer-row:last-child {
    border-bottom: 0;
}

.archivos-workspace .archivo-explorer-row:hover {
    background: rgba(130, 34, 34, 0.035);
}

.citas-workspace > div[style*="justify-content: space-between"] {
    padding: 0.55rem;
    border: 1px solid var(--workspace-border);
    border-radius: 10px;
    background: var(--workspace-soft);
}

@media (max-width: 720px) {
    .workspace-page > .page-header,
    .workspace-page .master-detail-list > .page-header {
        align-items: stretch;
        flex-direction: column;
        padding: 0.85rem;
    }

    .workspace-heading p {
        margin-left: 0;
    }

    .workspace-page > .page-header > :last-child,
    .workspace-page > .page-header > button,
    .workspace-page .master-detail-list > .page-header > :last-child,
    .workspace-page .master-detail-list > .page-header > button {
        align-self: flex-start;
    }

    .workspace-page .mobile-filter-grid {
        padding: 0.7rem;
    }
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}


/* =========================================================
   PREFERENCIAS DE APARIENCIA
   ========================================================= */

:root {
    --gestor-font-size: 15px;
    --gestor-form-max-width: 900px;
    --gestor-menu-width: 220px;
    --gestor-accent-color: #822222;
    --gestor-form-gap-v: 0.50rem;
    --gestor-form-gap-h: 1.00rem;
    --gestor-control-padding-v: 0.20rem;
    --gestor-control-padding-h: 0.50rem;
    --gestor-section-gap: 1.20rem;
    --gestor-table-padding-v: 0.22rem;
    --gestor-table-padding-h: 0.55rem;
    --gestor-accent-color: #822222;
    --gestor-menu-background: #f7f7f5;
    --gestor-main-background: #ffffff;
}


/* =========================================================
   GESTOR - ESTILOS COMUNES
   ========================================================= */

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

    .page-header h1 {
        margin: 0;
    }

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
}

button {
    font: inherit;
    cursor: pointer;
}

.btn-primary,
.btn-secondary,
.btn-filter {
    border: 1px solid #d8d8d5;
    border-radius: 6px;
    padding: 0.45rem 0.8rem;
}

.btn-primary {
    background-color: #222222;
    border-color: #222222;
    color: #ffffff;
}

    .btn-primary:hover {
        background-color: #000000;
    }

.btn-secondary,
.btn-filter {
    background-color: #ffffff;
    color: #333333;
}

    .btn-secondary:hover,
    .btn-filter:hover {
        background-color: #f2f2f0;
    }

.data-table {
    width: 100%;
    border-collapse: collapse;
}

    .data-table th {
        text-align: left;
        font-weight: 600;
        font-size: 0.85rem;
        color: #666666;
        border-bottom: 1px solid #dededb;
        padding: calc(var(--gestor-table-padding-v) - 0.05rem) var(--gestor-table-padding-h);
    }

    .data-table td {
        padding: var(--gestor-table-padding-v) var(--gestor-table-padding-h);
        border-bottom: 1px solid #eeeeeb;
        vertical-align: middle;
    }

    .data-table tbody tr:hover {
        background-color: #fafaf8;
    }

.empty-message {
    color: #777777;
    margin-top: 1rem;
}

/* =========================================================
   TIPOGRAFÍA GENERAL
   ========================================================= */

html,
body,
button,
input,
select,
textarea {
    font-family: var(--gestor-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
}

.gestor-layout,
.appearance-preview {
    font-family: var(--gestor-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
}

body {
    font-size: var(--gestor-font-size);
    line-height: 1.5;
    color: #222222;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: inherit;
    color: #222222;
    font-weight: 600;
}


/* =========================================================
   FILTROS ACTIVOS
   ========================================================= */

.btn-filter.active {
    background-color: #e8e8e5;
    border-color: #cfcfcb;
    color: #111111;
    font-weight: 600;
}

.btn-filter.active {
    background-color: #e8e8e5;
    border-color: #cfcfcb;
    color: #111111;
    font-weight: 600;
}


/* =========================================================
   FORMULARIOS
   ========================================================= */

.form-page {
    width: 100%;
    max-width: var(--gestor-form-max-width);
}

    .form-page form {
        width: 100%;
    }


/* Cuadrícula principal */

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gestor-form-gap-v) var(--gestor-form-gap-h);
    align-items: start;
}


/* Campo individual */

.form-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0.35rem;
}

.form-group-full {
    grid-column: 1 / -1;
}


/* Etiquetas */

.form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: #444444;
}


/* Controles */

.form-group input,
.form-group select,
.form-group textarea {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    font: inherit;
    font-size: 0.95rem;
    color: #222222;
    background-color: #ffffff;
    border: 1px solid #d0d0cc;
    border-radius: 6px;
    padding: var(--gestor-control-padding-v) var(--gestor-control-padding-h);
    outline: none;
}


/* Altura homogénea para campos simples */

.form-group input,
.form-group select {
    min-height: 38px;
}


/* Áreas de texto */

.form-group textarea {
    min-height: 90px;
    resize: vertical;
    line-height: 1.45;
}


    /* Foco */

    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
        border-color: #777777;
        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06);
    }


    /* Campos deshabilitados */

    .form-group input:disabled,
    .form-group select:disabled,
    .form-group textarea:disabled {
        background-color: #f3f3f1;
        color: #777777;
        cursor: not-allowed;
    }


/* Botones inferiores */

.form-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid #ececea;
}


/* Mensajes */

.form-message {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background-color: #f5f5f3;
    border-radius: 6px;
    color: #333333;
}

.form-message.form-warning {
    border: 1px solid color-mix(in srgb, var(--gestor-warning-text, #5a4300) 28%, transparent);
    background: var(--gestor-warning-background, #fff4cc);
    color: var(--gestor-warning-text, #5a4300);
}

.record-modal-dialog,
.entity-modal-dialog {
    max-width: none;
    max-height: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    overflow: visible;
}

.record-modal-dialog::backdrop,
.entity-modal-dialog::backdrop {
    background: rgba(255, 255, 255, 0.76);
    backdrop-filter: blur(1px);
}

.record-modal-card,
.entity-modal-card {
    display: flex;
    flex-direction: column;
    width: min(900px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow: hidden;
    border: 2px solid #2d2d2b;
    border-radius: 12px;
    background: var(--gestor-main-background, #ffffff);
    color: #222222;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.28);
}

.record-modal-small {
    width: min(560px, calc(100vw - 2rem));
}

.record-modal-normal {
    width: min(800px, calc(100vw - 2rem));
}

.record-modal-large {
    width: min(1000px, calc(100vw - 2rem));
}

.record-modal-extra-large {
    width: min(1200px, calc(100vw - 2rem));
}

.record-modal-header,
.entity-modal-header {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid #e3e3df;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--gestor-accent-color, #822222) 8%, var(--gestor-main-background, #fff)),
        var(--gestor-main-background, #fff));
}

.record-modal-header h2,
.record-modal-header p,
.entity-modal-header h2,
.entity-modal-header p {
    margin: 0;
}

.record-modal-header p,
.entity-modal-header p {
    margin-top: 0.2rem;
    color: #777777;
    font-size: 0.85rem;
}

.record-modal-close,
.entity-modal-close {
    min-width: 2rem;
    min-height: 2rem;
    padding: 0;
    border: 1px solid #d8d8d3;
    border-radius: 7px;
    background: var(--gestor-main-background, #fff);
    color: inherit;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.record-modal-close:hover,
.entity-modal-close:hover {
    border-color: var(--gestor-accent-color, #822222);
    color: var(--gestor-accent-color, #822222);
}

.record-modal-body,
.entity-modal-body {
    min-height: 0;
    overflow: auto;
    padding: 1rem 1.15rem 1.25rem;
}

.entity-modal-loading {
    padding: 2rem;
}

.entity-modal-link {
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.home-list-button {
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

@media (max-width: 700px) {
    .record-modal-dialog,
    .entity-modal-dialog {
        width: 100vw;
        height: 100vh;
        margin: 0;
    }

    .record-modal-card,
    .entity-modal-card {
        width: 100vw;
        max-height: 100vh;
        height: 100vh;
        border: 0;
        border-radius: 0;
    }
}


/* Adaptación a pantallas estrechas */

@media (max-width: 700px) {

    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-group-full {
        grid-column: auto;
    }

    .form-actions {
        flex-wrap: wrap;
    }
}

/* =========================================================
   SELECTOR DE ARCHIVOS
   ========================================================= */

.file-selector {
    width: 100%;
    border: 1px solid #ddddda;
    border-radius: 8px;
    background-color: #ffffff;
    overflow: hidden;
}

.file-selector-header {
    padding: 1rem;
    background-color: #f7f7f5;
    border-bottom: 1px solid #e5e5e2;
}

.file-selector-location {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    background-color: #fafaf8;
    border-bottom: 1px solid #eeeeeb;
}

.file-selector-filter {
    display: grid;
    gap: 0.35rem;
    padding: 0.75rem 1rem;
    background-color: #fafaf8;
    border-bottom: 1px solid #eeeeeb;
}

    .file-selector-filter label {
        font-size: 0.85rem;
        font-weight: 600;
    }

.file-selector-list {
    display: flex;
    flex-direction: column;
    max-height: 420px;
    overflow-y: auto;
}

.file-selector-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.7rem 1rem;
    border: 0;
    border-bottom: 1px solid #f0f0ed;
    border-radius: 0;
    background-color: #ffffff;
    color: #222222;
    text-align: left;
}

    .file-selector-item:hover {
        background-color: #f7f7f5;
    }

.file-selector-folder {
    font-weight: 500;
}

.file-selector-icon {
    flex: 0 0 auto;
    width: 1.5rem;
    text-align: center;
}

.file-selector-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-selector-info {
    flex: 0 0 auto;
    font-size: 0.82rem;
    color: #888888;
}


/* =========================================================
   ARCHIVO SELECCIONADO
   ========================================================= */

.selected-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid #d8d8d5;
    border-radius: 7px;
    background-color: #fafaf8;
}

.selected-file-main {
    min-width: 0;
    flex: 1;
}

.selected-file-name {
    font-weight: 600;
    color: #222222;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selected-file-path {
    margin-top: 0.2rem;
    font-size: 0.85rem;
    color: #777777;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-selector-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}


/* =========================================================
   ENLACES EN TABLAS
   ========================================================= */

.table-link {
    color: var(--gestor-accent-color);
    text-decoration: none;
    font-weight: 600;
}


/* =========================================================
   HOME
   ========================================================= */

.home-page {
    width: 100%;
}

.home-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2rem;
}

    .home-header h1 {
        margin: 0;
    }

    .home-header p {
        margin: 0.3rem 0 0 0;
        color: #777777;
    }

.home-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

    .home-actions a {
        text-decoration: none;
    }


/* Resumen */

.home-cards {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(150px, 1fr) );
    gap: 0.8rem;
    margin-bottom: 2rem;
}

.home-card {
    display: block;
    padding: 1rem 1.1rem;
    border: 1px solid #e2e2de;
    border-radius: 8px;
    background-color: #ffffff;
    color: #222222;
    text-decoration: none;
}

    .home-card:hover {
        background-color: #fafaf8;
        border-color: #d0d0cc;
    }

.home-card-value {
    font-size: 1.75rem;
    line-height: 1.2;
    font-weight: 600;
}

.home-card-label {
    margin-top: 0.3rem;
    font-size: 0.88rem;
    color: #777777;
}

.economy-chart-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.45rem;
}

.economy-chart-title {
    margin-bottom: 0.1rem;
    color: #777777;
    font-size: 0.78rem;
}

.economy-chart-row {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.economy-chart-row > div {
    height: 0.55rem;
    overflow: hidden;
    border-radius: var(--gestor-control-radius, 6px);
    background: #ececea;
}

.economy-chart-row i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--gestor-accent-color, #822222);
}

.economy-chart-row:nth-child(3) i {
    opacity: 0.72;
}

.economy-chart-row:nth-child(4) i {
    opacity: 0.46;
}


/* Secciones inferiores */

.home-sections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
}

.home-section {
    min-width: 0;
}

.home-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

    .home-section-header h2 {
        margin: 0;
        font-size: 1.05rem;
        font-weight: 600;
    }

    .home-section-header a {
        font-size: 0.85rem;
        color: #666666;
        text-decoration: none;
    }

        .home-section-header a:hover {
            text-decoration: underline;
        }


/* Listas */

.home-list {
    border-top: 1px solid #e5e5e2;
}

.home-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 0.25rem;
    border-bottom: 1px solid #eeeeeb;
    color: #222222;
    text-decoration: none;
}

    .home-list-item:hover {
        background-color: #fafaf8;
    }

.home-list-main {
    flex: 1;
    min-width: 0;
}

.home-list-title {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-list-secondary {
    margin-top: 0.2rem;
    font-size: 0.82rem;
    color: #888888;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-list-date {
    flex: 0 0 auto;
    font-size: 0.82rem;
    color: #666666;
}

    .home-list-date.overdue {
        font-weight: 600;
        color: #9b2c2c;
    }


/* Pantallas estrechas */

@media (max-width: 900px) {

    .home-header {
        flex-direction: column;
    }

    .home-sections {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   LOGIN
   ========================================================= */

.login-layout {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background-color: #f7f7f5;
}

.login-container {
    width: 100%;
    max-width: 420px;
}

.login-card {
    width: 100%;
    box-sizing: border-box;
    padding: 2rem;
    background-color: #ffffff;
    border: 1px solid #e2e2de;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.login-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.75rem;
    text-align: center;
}

.login-logo {
    display: block;
    width: min(96px, 100%);
    height: auto;
    max-height: 96px;
    margin-bottom: 1rem;
    object-fit: contain;
}

    .login-title h1 {
        margin: 0;
        font-size: 1.8rem;
    }

    .login-title p {
        margin: 0.35rem 0 0 0;
        color: #777777;
    }

.login-form {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.login-submit {
    width: 100%;
    margin-top: 0.35rem;
}

.login-error {
    padding: 0.7rem 0.8rem;
    border-radius: 6px;
    background-color: #f9eeee;
    color: #8b2525;
    font-size: 0.9rem;
}

.login-authenticated {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

    .login-authenticated p {
        margin: 0;
    }

    .login-authenticated a {
        display: block;
        text-align: center;
        text-decoration: none;
    }

    .login-authenticated form {
        margin: 0;
    }

    .login-authenticated button {
        width: 100%;
    }

/* =========================================================
   ELIMINACIÓN
   ========================================================= */

.btn-danger {
    border: 1px solid #b42318;
    border-radius: 6px;
    padding: 0.45rem 0.8rem;
    background-color: #b42318;
    color: #ffffff;
    font: inherit;
    cursor: pointer;
}

    .btn-danger:hover {
        background-color: #922018;
    }

.delete-confirmation {
    margin-top: 1.5rem;
    padding: 1rem;
    border: 1px solid #e5b8b4;
    border-radius: 8px;
    background-color: #fff7f6;
}

    .delete-confirmation p {
        margin: 0 0 0.5rem 0;
    }

    .delete-confirmation .form-actions {
        margin-top: 1rem;
    }


/* =========================================================
   SECCIONES DE PROYECTO
   ========================================================= */

.project-section {
    margin-top: var(--gestor-section-gap);
}

.project-entity-linker {
    display: grid;
    grid-template-columns: minmax(8rem, 0.55fr) minmax(15rem, 1.5fr) minmax(11rem, 0.8fr) 4.5rem auto;
    gap: 0.45rem 0.65rem;
    align-items: end;
    margin-bottom: 0.65rem;
}

.project-entity-principal {
    display: inline-flex;
    min-height: 1.8rem;
    align-items: center;
    justify-content: center;
}

.project-entity-principal input[type="checkbox"] {
    width: 1rem;
    min-width: 1rem;
    height: 1rem;
    margin: 0;
}

.project-entity-link-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    margin: 0;
}

.project-entity-relations th:last-child,
.project-entity-relations td:last-child {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

.project-entity-relations .table-actions {
    justify-content: flex-end;
}

@media (max-width: 1050px) {
    .project-entity-linker {
        grid-template-columns: minmax(8rem, 0.6fr) minmax(14rem, 1.4fr) minmax(10rem, 0.8fr) auto;
    }

    .project-entity-link-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .project-entity-linker {
        grid-template-columns: 1fr;
    }

    .project-entity-link-actions {
        grid-column: auto;
    }
}

    .project-section:last-child {
        margin-bottom: 3rem;
    }

.project-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

    .project-section-header h2 {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 600;
    }



/* =========================================================
   ICONOS
   ========================================================= */

.gestor-icon {
    width: 1.8rem;
    height: 1.8rem;
    flex: 0 0 auto;
    display: inline-block;
    vertical-align: middle;
    stroke-width: 0.5;
}
/* =========================================================
   TÍTULOS CON ICONO
   ========================================================= */

.page-title-icon {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

    .page-title-icon .gestor-icon {
        width: 2rem;
        height: 2rem;
        stroke-width: 1.15;
    }
/* =========================================================
   ACCIONES DE ARCHIVOS
   ========================================================= */

.archivo-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.archivo-action-link {
    display: inline-block;
    text-decoration: none;
}

/* =========================================================
   ARCHIVOS - DISPONIBILIDAD EN ESTE EQUIPO
   ========================================================= */

/*
 * LOCAL
 * - Datos de la fila en cursiva.
 * - Color normal para los datos.
 * - El nombre del archivo conserva el granate de .table-link.
 */
td.archivo-estado-local {
    font-style: italic !important;
}

td.archivo-estado-local .table-link {
        font-style: italic !important;
        color: var(--gestor-accent-color, #822222) !important;
    }


/*
 * REMOTO
 * - Presentación normal.
 * - Color normal para los datos.
 * - El nombre del archivo conserva el granate de .table-link.
 */
td.archivo-estado-remoto {
    font-style: normal !important;
}

td.archivo-estado-remoto .table-link {
        font-style: normal !important;
        color: var(--gestor-accent-color, #822222) !important;
    }


/*
 * SIN CONFIGURAR / SIN SINCRONIZAR / DESCONOCIDO
 * - Presentación normal.
 * - Los datos se muestran en gris claro.
 * - El nombre del archivo conserva el granate de .table-link.
 */
td.archivo-estado-no-disponible {
    font-style: normal !important;
    color: #999999 !important;
}

td.archivo-estado-no-disponible .table-link {
        font-style: normal !important;
        color: var(--gestor-accent-color, #822222) !important;
    }


/*
 * Los botones y enlaces de acciones no reciben ninguna
 * de estas clases, por lo que conservan su aspecto normal.
 */
/* =========================================================
   INTERFAZ COMPACTA
   ========================================================= */

/* Cabeceras de página */
.page-header {
    margin-bottom: 0.65rem;
}


/* Filtros Activos / Archivados / Todos */
.filter-bar {
    gap: 0.30rem;
    margin-bottom: 0.70rem;
}


/* Botones */
.btn-primary,
.btn-secondary,
.btn-filter {
    padding: 0.32rem 0.65rem;
}


/* Menor separación entre label y control */
.form-group {
    gap: 0.20rem;
}


    /* Labels algo más compactos */
    .form-group label {
        line-height: 1.2;
    }


    /* Inputs y select */
    .form-group input,
    .form-group select {
        min-height: 32px;
    }


    /* Textareas */
    .form-group textarea {
        min-height: 70px;
    }


/* Botonera inferior de formularios */
.form-actions {
    gap: 0.45rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
}


/* Mensajes */
.form-message {
    margin-top: 0.65rem;
    padding: 0.50rem 0.75rem;
}


/* Secciones de proyecto */
.project-section {
    margin-top: var(--gestor-section-gap);
}

.project-section-header {
    margin-bottom: 0.45rem;
}


/* Menos espacio después de la última sección */
.project-section:last-child {
    margin-bottom: 1.5rem;
}


/* Tablas todavía más compactas visualmente */
.data-table th {
    line-height: 1.2;
    height: 36px;
    color: var(--gestor-main-text, #595954);
    font-size: 0.76rem;
    font-weight: 700 !important;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.data-table td {
    line-height: 1.25;
}


/* Acciones Descargar / Abrir / Editar */
.archivo-actions {
    gap: 0.25rem;
}


/* Campos de búsqueda y filtros */
input[type="search"] {
    min-height: 32px;
}


.btn-primary,
.btn-secondary,
.btn-filter {
    padding: 0.22rem 0.55rem;
}

.form-actions {
    gap: 0.35rem;
    margin-top: 0.70rem;
    padding-top: 0.50rem;
}

.form-message {
    margin-top: 0.50rem;
    padding: 0.35rem 0.60rem;
}

.form-group input,
.form-group select {
    min-height: 28px;
}

input[type="search"] {
    min-height: 28px;
}
/* =========================================================
   CONTROLES SIN ESQUINAS REDONDEADAS
   ========================================================= */

.form-group input,
.form-group select,
.form-group textarea,
.btn-primary,
.btn-secondary,
.btn-filter,
.btn-danger {
    border-radius: 0;
}


/* =========================================================
   ENLACES DEL MENÚ
   ========================================================= */

::deep .nav-link,
::deep .nav-link:link,
::deep .nav-link:visited,
::deep .nav-link:hover,
::deep .nav-link:focus,
::deep .nav-link:active {
    color: #822222 !important;
    font-weight: 700;
    text-decoration: none !important;
}



/* =========================================================
   COLORES DEL ÁREA PRINCIPAL
   ========================================================= */

.gestor-main {
    color: var(--gestor-main-text, #222222);
}


    /* Títulos */

    .gestor-main h1,
    .gestor-main h2,
    .gestor-main h3,
    .gestor-main h4,
    .gestor-main h5,
    .gestor-main h6 {
        color: var(--gestor-main-text, #222222);
    }


    /* Etiquetas de formularios */

    .gestor-main .form-group label {
        color: var(--gestor-main-text, #222222);
    }


    /* Textos auxiliares de formularios */

    .gestor-main .form-group small {
        color: var(--gestor-main-text, #222222);
        opacity: 0.72;
    }


    /* Mensajes y textos secundarios */

    .gestor-main .empty-message {
        color: var(--gestor-main-text, #222222);
        opacity: 0.72;
    }


    /* Cabecera de Inicio */

    .gestor-main .home-header p {
        color: var(--gestor-main-text, #222222);
        opacity: 0.72;
    }


    /* Tablas */

    .gestor-main .data-table th {
        color: var(--gestor-main-text, #222222);
        opacity: 0.72;
    }

    .gestor-main .data-table td {
        color: var(--gestor-main-text, #222222);
    }


    /* Listas de Inicio */

    .gestor-main .home-list-item {
        color: var(--gestor-main-text, #222222);
    }

    .gestor-main .home-list-secondary,
    .gestor-main .home-list-date {
        color: var(--gestor-main-text, #222222);
        opacity: 0.72;
    }


    /* Enlaces secundarios de secciones */

    .gestor-main .home-section-header a {
        color: var(--gestor-main-text, #222222);
        opacity: 0.72;
    }


    /* El color principal sigue gobernando
   los enlaces destacados */

    .gestor-main .table-link {
        color: var(--gestor-accent-color, #822222);
        opacity: 1;
    }
/* =========================================================
   RESPONSIVE / MÓVIL
   ========================================================= */

/*
 * Barra superior y fondo del menú móvil.
 * En escritorio permanecen ocultos.
 */

.gestor-mobile-bar,
.gestor-mobile-overlay {
    display: none;
}


/* Agenda de Inicio */

.home-agenda-section {
    margin-bottom: 1.5rem;
}

.home-agenda-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.home-agenda-navigation {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
}

    .home-agenda-navigation h2 {
        margin: 0;
    }

.home-agenda-title {
    margin-left: 0.25rem;
}

.home-agenda-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.home-agenda-scroll {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #d8d8d5;
    border-radius: 8px;
    -webkit-overflow-scrolling: touch;
}

.home-agenda-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(130px, 1fr));
    min-width: 910px;
}

.home-agenda-day {
    min-width: 0;
    min-height: 145px;
    border-right: 1px solid #e2e2df;
}

    .home-agenda-day:last-child {
        border-right: 0;
    }

.home-agenda-day-header {
    display: block;
}

.home-agenda-day-content {
    padding: 0.4rem;
}

.home-agenda-empty {
    padding: 0.35rem;
    color: #888888;
    font-size: 0.82rem;
}

.home-agenda-item {
    display: block;
    width: 100%;
    margin-bottom: 0.3rem;
    padding: 0.4rem 0.45rem;
    border: 1px solid #d8d8d5;
    border-left: 4px solid var(--gestor-accent-color, #822222);
    border-radius: 5px;
    background: #ffffff;
    color: inherit;
    text-align: left;
}

.home-agenda-item-time {
    margin-bottom: 0.08rem;
    font-size: 0.76rem;
    color: #666666;
}

.home-agenda-item-title {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-agenda-item-project {
    margin-top: 0.08rem;
    font-size: 0.76rem;
    color: #666666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   TABLET Y MÓVIL
   ========================================================= */

@media (max-width: 800px), (max-width: 1100px) and (max-height: 650px) and (orientation: landscape) {

    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .gestor-layout {
        display: block !important;
        width: 100% !important;
        min-height: 100vh;
    }


    /* Barra superior */

    .gestor-mobile-bar {
        position: sticky;
        top: 0;
        z-index: 1200;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        min-height: 48px;
        padding: 0.4rem 0.7rem;
        border-bottom: 1px solid #dededb;
        background-color: var(--gestor-menu-background, #f7f7f5);
        color: var(--gestor-menu-text, #222222);
    }

    .gestor-mobile-title {
        min-width: 0;
        font-size: 1.05rem;
        font-weight: 700;
    }

    .gestor-mobile-menu-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 38px;
        padding: 0;
        border: 1px solid #d0d0cc;
        border-radius: 0;
        background: #ffffff;
        color: var(--gestor-accent-color, #822222);
        font-size: 1.35rem;
        line-height: 1;
    }


    /* Menú lateral como panel desplegable */

    .gestor-sidebar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 1400 !important;
        width: min(var(--gestor-menu-width, 220px), 86vw) !important;
        max-width: 320px;
        height: 100dvh !important;
        margin: 0 !important;
        overflow-y: auto;
        transform: translateX(-105%);
        transition: transform 0.18s ease-out;
        background-color: var(--gestor-menu-background, #f7f7f5);
        box-shadow: 4px 0 14px rgba(0, 0, 0, 0.12);
    }

        .gestor-sidebar.mobile-open {
            transform: translateX(0);
        }

        .gestor-sidebar .gestor-logo {
            padding-top: 1rem;
        }

        .gestor-sidebar .nav-link {
            display: flex;
            align-items: center;
            min-height: 42px;
            padding-top: 0.55rem;
            padding-bottom: 0.55rem;
        }

        .gestor-sidebar .nav-logout {
            min-height: 42px;
        }


    /* Fondo oscuro cuando el menú está abierto */

    .gestor-mobile-overlay {
        position: fixed;
        inset: 0;
        z-index: 1300;
        display: block;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: rgba(0, 0, 0, 0.28);
    }


    /* Área principal */

    .gestor-main {
        box-sizing: border-box;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0.75rem !important;
        overflow-x: hidden;
    }


    /* Cabeceras generales */

    .page-header,
    .project-section-header {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0.6rem;
    }


    /* Botones: mejor zona táctil en móvil */

    .btn-primary,
    .btn-secondary,
    .btn-filter,
    .btn-danger {
        min-height: 38px;
    }


    /* Inicio */

    .home-header {
        gap: 1rem;
        margin-bottom: 1.25rem;
    }

    .home-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

        .home-actions a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 40px;
            text-align: center;
        }

    .home-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
        margin-bottom: 1.35rem;
    }

    .home-card {
        padding: 0.8rem;
    }

    .home-card-value {
        font-size: 1.45rem;
    }


    /* Agenda semanal */

    .home-agenda-section {
        margin-bottom: 1.25rem;
    }

    .home-agenda-header {
        align-items: stretch;
        gap: 0.65rem;
    }

    .home-agenda-navigation {
        width: 100%;
    }

    .home-agenda-title {
        flex: 1 0 100%;
        margin-left: 0;
        font-size: 0.9rem;
    }

    .home-agenda-actions {
        width: 100%;
        justify-content: space-between;
    }

    .home-agenda-scroll {
        scroll-snap-type: x proximity;
        overscroll-behavior-x: contain;
    }

    .home-agenda-grid {
        width: max-content;
        min-width: 100%;
        grid-template-columns: repeat(7, minmax(76vw, 76vw));
    }

    .home-agenda-day {
        min-height: 135px;
        scroll-snap-align: start;
    }

    .home-agenda-day-content {
        padding: 0.45rem;
    }

    .home-agenda-item {
        min-height: 44px;
        padding: 0.5rem;
    }


    /* Formularios */

    .form-page {
        max-width: 100%;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-group-full {
        grid-column: auto;
    }

    .form-actions {
        flex-wrap: wrap;
    }

    .form-actions > * {
        min-height: 40px;
    }


    /* Selector de archivos */

    .selected-file,
    .file-selector-location {
        align-items: stretch;
        flex-direction: column;
        gap: 0.6rem;
    }

    .file-selector-actions {
        flex-wrap: wrap;
    }


    /* Tablas: desplazamiento dentro de la tabla,
       no de toda la página */

    .data-table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

        .data-table th,
        .data-table td {
            white-space: nowrap;
        }
}


/* =========================================================
   TELÉFONOS ESTRECHOS
   ========================================================= */

@media (max-width: 420px) {

    .gestor-main {
        padding: 0.55rem !important;
    }

    .home-actions {
        gap: 0.4rem;
    }

    .home-cards {
        gap: 0.4rem;
    }

    .home-card {
        padding: 0.7rem 0.65rem;
    }

    .home-card-label {
        font-size: 0.82rem;
    }

    .home-agenda-grid {
        grid-template-columns: repeat(7, minmax(82vw, 82vw));
    }

    .home-list-item {
        align-items: flex-start;
        gap: 0.5rem;
    }

    .home-list-date {
        font-size: 0.76rem;
    }
}


/* =========================================================
   TELÉFONOS MUY ESTRECHOS
   ========================================================= */

@media (max-width: 340px) {

    .home-actions,
    .home-cards {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   RESPONSIVE V2 - AJUSTES DE INICIO
   ========================================================= */

/* Cabeceras de día de agenda.
   El día actual usa siempre el color principal configurado. */

.home-agenda-day-header {
    width: 100%;
    padding: 0.55rem;
    border: 0;
    border-bottom: 1px solid #e2e2df;
    background-color: #f7f7f5;
    color: inherit;
    text-align: left;
}

    .home-agenda-day-header.is-today {
        background-color: var(--gestor-accent-color, #822222) !important;
        color: #ffffff !important;
    }


@media (max-width: 800px), (max-width: 1100px) and (max-height: 650px) and (orientation: landscape) {

    /* La barra superior móvil ya identifica la aplicación.
       En Inicio dejamos solo "Resumen general". */

    .home-main-title {
        display: none;
    }

    .home-header p {
        margin-top: 0;
        font-size: 1rem;
    }


    /* Cabecera de Agenda más compacta:
       Agenda + navegación + intervalo semanal en una misma línea
       siempre que haya anchura suficiente. */

    .home-agenda-header {
        gap: 0.45rem;
    }

    .home-agenda-navigation {
        display: grid;
        grid-template-columns: auto auto auto auto minmax(0, 1fr);
        align-items: center;
        width: 100%;
        gap: 0.35rem;
    }

        .home-agenda-navigation h2 {
            white-space: nowrap;
        }

        .home-agenda-navigation .btn-secondary {
            min-width: 30px;
            min-height: 34px;
            padding: 0.18rem 0.45rem;
        }

    .home-agenda-title {
        min-width: 0;
        margin-left: 0.15rem;
        font-size: 0.84rem;
        line-height: 1.15;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .home-agenda-actions {
        justify-content: flex-end;
        gap: 0.55rem;
    }


    /* La quinta tarjeta ocupa el ancho completo
       para evitar una celda vacía en la última fila. */

    .home-card-wide-mobile {
        grid-column: 1 / -1;
    }
}


@media (max-width: 420px) {

    .home-agenda-navigation {
        grid-template-columns: auto auto auto auto minmax(90px, 1fr);
        gap: 0.3rem;
    }

    .home-agenda-navigation h2 {
        font-size: 1rem;
    }

    .home-agenda-title {
        font-size: 0.80rem;
    }
}


@media (max-width: 340px) {

    .home-card-wide-mobile {
        grid-column: auto;
    }

    .home-agenda-navigation {
        grid-template-columns: auto auto auto auto;
    }

    .home-agenda-title {
        grid-column: 1 / -1;
        margin-left: 0;
    }
}
/* =========================================================
   RESPONSIVE V3 - BOTONES Y AGENDA MÁS COMPACTOS
   ========================================================= */

@media (max-width: 800px), (max-width: 1100px) and (max-height: 650px) and (orientation: landscape) {

    /* Botones compactos: mínimo espacio entre texto y borde */

    .btn-primary,
    .btn-secondary,
    .btn-filter,
    .btn-danger {
        min-height: 0;
        padding: 0.10rem 0.32rem;
        line-height: 1.20;
    }

    .form-actions > * {
        min-height: 0;
    }

    .home-actions a,
    .home-actions button {
        min-height: 0;
        padding: 0.18rem 0.38rem;
        line-height: 1.20;
    }

    .home-agenda-navigation .btn-secondary {
        min-width: 0;
        min-height: 0;
        padding: 0.08rem 0.28rem;
        line-height: 1.15;
    }

    .home-agenda-actions .btn-primary,
    .home-agenda-actions .btn-secondary {
        min-height: 0;
        padding: 0.10rem 0.32rem;
    }


    /* Agenda semanal más estrecha:
       se ven aproximadamente 3 días a la vez en un móvil normal */

    .home-agenda-grid {
        grid-template-columns: repeat(7, minmax(118px, 34vw));
    }

    .home-agenda-day {
        min-height: 105px;
    }

    .home-agenda-day-header {
        padding: 0.30rem 0.38rem;
        font-size: 0.88rem;
        line-height: 1.15;
    }

    .home-agenda-day-content {
        padding: 0.25rem;
    }

    .home-agenda-empty {
        padding: 0.25rem;
        font-size: 0.78rem;
    }

    .home-agenda-item {
        min-height: 0;
        margin-bottom: 0.20rem;
        padding: 0.28rem 0.32rem;
        line-height: 1.15;
    }

    .home-agenda-item-time,
    .home-agenda-item-project {
        font-size: 0.72rem;
    }

    .home-agenda-item-title {
        font-size: 0.84rem;
    }
}


@media (max-width: 420px) {

    .home-agenda-grid {
        grid-template-columns: repeat(7, minmax(112px, 34vw));
    }

    .home-actions a,
    .home-actions button {
        padding: 0.15rem 0.30rem;
    }
}

/* =========================================================
   FILTROS PLEGABLES - ESCRITORIO Y MÓVIL
   ========================================================= */

/*
 * Comportamiento común:
 * - Activos / Archivados / Todos: siempre visibles.
 * - Buscar: siempre visible.
 * - Filtros avanzados: ocultos inicialmente.
 * - Botón Filtros / Ocultar filtros: siempre visible.
 */

.mobile-filter-grid {
    margin-bottom: 0.65rem !important;
    gap: 0.45rem 0.75rem !important;
}

.mobile-filter-toggle-row {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    margin-top: 0.05rem;
}

.mobile-filter-toggle {
    min-height: 0;
    padding: 0.10rem 0.32rem;
    line-height: 1.20;
}

/* Primer hijo = Buscar.
   El botón de plegado también permanece visible. */
.mobile-filter-grid:not(.is-open)
    > :not(:first-child):not(.mobile-filter-toggle-row) {
    display: none !important;
}

.mobile-filter-grid.is-open {
    align-items: end;
}


/* =========================================================
   MÓVIL VERTICAL + TELÉFONO APAISADO
   ========================================================= */

@media (max-width: 800px),
       (max-width: 1100px) and (max-height: 650px) and (orientation: landscape) {

    .mobile-filter-grid {
        gap: 0.35rem 0.65rem !important;
    }

    /* En horizontal mantenemos barra superior y NavMenu oculto,
       igual que en móvil vertical. */
    .gestor-mobile-bar {
        display: flex;
    }

    .gestor-sidebar:not(.mobile-open) {
        transform: translateX(-105%);
    }
}


/* =========================================================
   VISTA MAESTRO / DETALLE DE TAREAS Y NOTAS
   ========================================================= */

.master-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    min-width: 0;
}

.master-detail-layout.has-editor {
    grid-template-columns: minmax(620px, 1.55fr) minmax(390px, 0.95fr);
}

.master-detail-list {
    min-width: 0;
    overflow-x: auto;
}

.master-detail-editor {
    position: sticky;
    top: 0.75rem;
    min-width: 0;
    max-height: calc(100vh - 1.5rem);
    overflow: auto;
    padding: 0.9rem;
    border: 1px solid var(--workspace-border, #e3e3df);
    border-radius: 10px;
    background: var(--gestor-main-background, #fff);
    box-shadow: 0 8px 24px rgba(32, 32, 28, 0.075);
}

.embedded-editor-form {
    min-width: 0;
}

.embedded-editor-header {
    display: flex;
    align-items: center;
    min-height: 2.2rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--workspace-border, #e3e3df);
}

.embedded-editor-header h2 {
    margin: 0;
    font-size: 1.35rem;
}

.master-detail-editor .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.master-detail-editor .project-section {
    margin-top: 1rem;
}

.master-detail-editor .data-table {
    min-width: 600px;
}

.workspace-page .data-table tr.is-selected td {
    background: color-mix(
        in srgb,
        var(--gestor-accent-color, #822222) 9%,
        var(--gestor-main-background, #fff));
}

.workspace-page .table-link-button {
    display: inline;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--gestor-accent-color, #822222);
    font: inherit;
    font-weight: 650 !important;
    line-height: inherit;
    text-align: left;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    cursor: pointer;
}

.workspace-page .table-link-button:hover {
    color: color-mix(in srgb, var(--gestor-accent-color, #822222) 78%, #000);
}

@media (max-width: 1150px) {
    .master-detail-layout.has-editor {
        grid-template-columns: minmax(0, 1fr);
    }

    .master-detail-editor {
        position: static;
        order: -1;
        max-height: none;
    }
}

@media (max-width: 700px) {
    .master-detail-editor {
        padding: 0.7rem;
    }

    .master-detail-editor .form-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =========================================================
   NUEVO / EDITAR - RESPONSIVE
   ========================================================= */

.responsive-form-page {
    min-width: 0;
}

.responsive-inline-control {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

    .responsive-inline-control > input,
    .responsive-inline-control > select {
        flex: 1;
        min-width: 0;
    }

.responsive-data-table {
    max-width: 100%;
}


/* Móvil vertical y teléfono apaisado. */
@media (max-width: 800px),
       (max-width: 1100px) and (max-height: 650px) and (orientation: landscape) {

    .responsive-form-page {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .responsive-page-header {
        flex-wrap: wrap;
        gap: 0.35rem;
        margin-bottom: 0.50rem;
    }

        .responsive-page-header h1 {
            margin: 0;
            font-size: 1.65rem;
            line-height: 1.12;
        }

    .responsive-form-page .form-grid {
        gap: 0.38rem 0.70rem;
    }

    .responsive-form-page .form-group {
        gap: 0.10rem;
    }

        .responsive-form-page .form-group label {
            line-height: 1.15;
        }

        .responsive-form-page .form-group input,
        .responsive-form-page .form-group select {
            min-height: 0;
            padding: 0.14rem 0.30rem;
            line-height: 1.20;
        }

        .responsive-form-page .form-group textarea {
            min-height: 62px;
            padding: 0.18rem 0.30rem;
        }

    .responsive-form-actions {
        flex-wrap: wrap;
        gap: 0.28rem;
        margin-top: 0.50rem;
        padding-top: 0.38rem;
    }

        .responsive-form-actions .btn-primary,
        .responsive-form-actions .btn-secondary,
        .responsive-form-actions .btn-danger {
            min-height: 0;
            padding: 0.10rem 0.32rem;
            line-height: 1.20;
        }

    .responsive-inline-control {
        gap: 0.35rem;
    }

    .responsive-project-section {
        min-width: 0;
    }

        .responsive-project-section .project-section-header {
            flex-wrap: wrap;
            gap: 0.35rem;
        }

    .responsive-data-table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

        .responsive-data-table th,
        .responsive-data-table td {
            white-space: nowrap;
        }

    /* Selector de archivo */
    .responsive-form-page .selected-file {
        flex-direction: column;
        align-items: stretch;
        gap: 0.40rem;
    }

    .responsive-form-page .file-selector-actions {
        flex-wrap: wrap;
        gap: 0.30rem;
    }

    /* Confirmación de eliminación */
    .responsive-form-page .delete-confirmation {
        margin-top: 0.70rem;
        padding: 0.50rem;
    }
}


/* Móvil vertical: una sola columna. */
@media (max-width: 800px) {

    .responsive-form-page .form-grid {
        grid-template-columns: 1fr;
    }

    .responsive-form-page .form-group-full {
        grid-column: auto;
    }
}


/* Teléfono apaisado: dos columnas para aprovechar el ancho. */
@media (min-width: 801px) and (max-width: 1100px)
       and (max-height: 650px) and (orientation: landscape) {

    .responsive-form-page .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.32rem 0.70rem;
    }

    .responsive-form-page .form-group-full {
        grid-column: 1 / -1;
    }
}

/* =========================================================
   FILTROS PLEGABLES - REGLA FINAL
   ========================================================= */

/*
 * Estado cerrado:
 * - Buscar visible.
 * - Botón Filtros visible.
 * - Resto de filtros ocultos.
 *
 * Estado abierto:
 * - Todos los filtros visibles.
 *
 * Se aplica tanto en escritorio como en móvil.
 */

.mobile-filter-toggle-row {
    display: flex !important;
    grid-column: 1 / -1;
    align-items: center;
    margin-top: 0.05rem;
}

.mobile-filter-toggle {
    display: inline-flex !important;
    align-items: center;
    min-height: 0;
    padding: 0.10rem 0.32rem;
    line-height: 1.20;
}

.mobile-filter-grid:not(.is-open) > * {
    display: none !important;
}

.mobile-filter-grid:not(.is-open) > :first-child {
    display: flex !important;
}

.mobile-filter-grid:not(.is-open) > .mobile-filter-toggle-row {
    display: flex !important;
}

.mobile-filter-grid.is-open {
    align-items: end;
}


/* =========================================================
   PROYECTOS - TABLA COMPACTA EN MÓVIL
   ========================================================= */

/*
 * En móvil dejamos únicamente:
 * 1 Estado
 * 2 Proyecto
 * 3 Tipo
 *
 * En escritorio se mantienen todas las columnas.
 */

@media (max-width: 800px),
       (max-width: 1100px) and (max-height: 650px) and (orientation: landscape) {

    .proyectos-table th:nth-child(n + 4),
    .proyectos-table td:nth-child(n + 4) {
        display: none !important;
    }

    .proyectos-table th:nth-child(1),
    .proyectos-table td:nth-child(1) {
        width: 1%;
        white-space: nowrap;
    }

    .proyectos-table th:nth-child(2),
    .proyectos-table td:nth-child(2),
    .proyectos-table th:nth-child(3),
    .proyectos-table td:nth-child(3) {
        white-space: nowrap;
    }
}


/* =========================================================
   EDITAR PROYECTO - CONTROLES INLINE SIN BORDE
   ========================================================= */

/*
 * Tipo de fase, Orden, Estado, Prioridad, Fecha límite
 * y Etiquetas se integran visualmente en la tabla.
 * Conservan flechas, calendario y controles nativos.
 */

.responsive-project-section .project-inline-control,
.workspace-page .data-table .project-inline-control {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0.10rem 0.28rem;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    color: inherit;
    font: inherit;
    line-height: 1.20;
}

.responsive-project-section .project-inline-control:focus,
.responsive-project-section .project-inline-control:focus-visible,
.responsive-project-section .project-inline-control.valid.modified:not([type=checkbox]),
.responsive-project-section .project-inline-control.invalid,
.workspace-page .data-table .project-inline-control:focus,
.workspace-page .data-table .project-inline-control:focus-visible {
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    background-color: transparent !important;
}

.project-inline-date {
    min-width: 8.5rem;
}

.project-inline-tags {
    min-width: 10rem;
}

.project-inline-checkbox-cell {
    text-align: center;
}

.project-inline-checkbox-cell input[type="checkbox"] {
    margin: 0;
    vertical-align: middle;
}


/* =========================================================
   BOTONES Y COLORES - REGLA ÚNICA PARA TODA LA APLICACIÓN
   ========================================================= */

/* La misma cabecera en todas las páginas, no solo en los espacios de trabajo. */
.gestor-main .page-header {
    position: relative;
    box-sizing: border-box;
    margin-bottom: 0.8rem;
    padding: 1rem 1.1rem;
    border: 1px solid #e3e3df;
    border-radius: 12px;
    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--gestor-accent-color, #822222) var(--gestor-gradient-percent, 12%),
                transparent),
            transparent 72%),
        var(--gestor-main-background, #fff);
    box-shadow: 0 8px 24px rgba(32, 32, 28, 0.055);
}

.gestor-main .page-header h1 {
    margin: 0;
}

.gestor-main .btn-primary,
.gestor-main a.btn-primary {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0.28rem 0.65rem;
    border: 1px solid var(--gestor-accent-color, #822222);
    border-radius: 5px;
    background-color: var(--gestor-accent-color, #822222);
    color: #ffffff !important;
    font: inherit;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    font-weight: 400;
}

.gestor-main .btn-primary:hover,
.gestor-main a.btn-primary:hover {
    filter: brightness(0.90);
    background-color: var(--gestor-accent-color, #822222);
    border-color: var(--gestor-accent-color, #822222);
}

.gestor-main .btn-secondary,
.gestor-main a.btn-secondary,
.gestor-main .btn-filter {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0.28rem 0.65rem;
    border: 1px solid color-mix(in srgb, var(--gestor-main-text, #222222) 22%, transparent);
    border-radius: 5px;
    background-color: var(--gestor-main-background, #ffffff);
    color: var(--gestor-main-text, #222222) !important;
    font: inherit;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    font-weight: 400;
}

.gestor-main .btn-secondary:hover,
.gestor-main a.btn-secondary:hover,
.gestor-main .btn-filter:hover {
    background-color: color-mix(in srgb, var(--gestor-accent-color, #822222) 7%, var(--gestor-main-background, #ffffff));
    border-color: color-mix(in srgb, var(--gestor-accent-color, #822222) 45%, transparent);
}

.gestor-main .btn-filter.active {
    border-color: var(--gestor-accent-color, #822222);
    background-color: var(--gestor-accent-color, #822222);
    color: #ffffff !important;
    font-weight: 400;
}

.gestor-main .btn-danger,
.gestor-main button.btn-danger {
    font-weight: 400;
}

.table-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
}

.menu-role-table th:not(:first-child),
.menu-role-table td:not(:first-child) {
    text-align: center;
}

.menu-role-table input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    margin: 0;
    vertical-align: middle;
}

/* Preferencias de geometría y cabeceras. */
.gestor-layout.gestor-flat-headers .gestor-main .page-header {
    padding: 0;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.gestor-layout.gestor-flat-headers .gestor-sidebar .nav-link.active {
    background-image: none !important;
    background-color: color-mix(in srgb, var(--gestor-menu-selected-text, #822222) 8%, transparent) !important;
}

.gestor-layout.gestor-square-controls * {
    border-radius: 0 !important;
}

/* Evita que el contexto del contenedor cambie el peso de sus botones. */
.gestor-main button,
.gestor-main a.btn-primary,
.gestor-main a.btn-secondary,
.gestor-main a.btn-danger,
.gestor-main .btn-filter {
    font-weight: 400 !important;
}

.gestor-main .btn-primary:disabled,
.gestor-main .btn-secondary:disabled,
.gestor-main .btn-filter:disabled {
    cursor: not-allowed;
    filter: none;
    opacity: 0.48;
}

.archivo-actions,
.archivo-explorer-actions {
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    white-space: normal;
}

.archivo-actions > .btn-secondary,
.archivo-explorer-actions > .btn-secondary,
.archivo-actions > .archivo-action-link,
.archivo-explorer-actions > .archivo-action-link {
    min-height: 30px;
    margin: 0;
    padding: 0.24rem 0.55rem;
    line-height: 1;
    white-space: nowrap;
}

.archivo-explorer-add {
    display: inline-flex;
    align-items: center;
    min-height: 1.35rem;
    line-height: 1;
}

@media (max-width: 800px),
       (max-width: 1100px) and (max-height: 650px) and (orientation: landscape) {
    .gestor-main .btn-primary,
    .gestor-main a.btn-primary,
    .gestor-main .btn-secondary,
    .gestor-main a.btn-secondary,
    .gestor-main .btn-filter {
        min-height: 29px;
        padding: 0.22rem 0.48rem;
    }
}
.table-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .32rem;
    min-width: 2rem;
    min-height: 2rem;
    padding: .28rem .42rem;
    line-height: 1;
}

.action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .32rem;
}

.form-action-button .table-action-icon {
    width: 1rem;
    height: 1rem;
}

.table-action-icon {
    width: 1.08rem;
    height: 1.08rem;
    flex: 0 0 auto;
}

.gestor-table-action-icons .table-action-button .table-action-text,
.gestor-table-action-icons .table-action-button .action-button-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.gestor-table-action-text .table-action-button .table-action-icon {
    display: none;
}

.gestor-form-action-text .form-action-button .table-action-icon {
    display: none;
}

.archivo-actions {
    flex-wrap: nowrap;
    white-space: nowrap;
}

.archivos-record-table .archivo-record-action-column {
    width: 1%;
    min-width: 0;
    padding-right: 0.12rem;
    padding-left: 0.12rem;
    white-space: nowrap;
}

.record-view-switch {
    display: flex;
    justify-content: flex-end;
    gap: .3rem;
    margin: -.35rem 0 .7rem;
}

.project-detail-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: 1rem 0 .75rem;
    padding-bottom: .45rem;
    border-bottom: 1px solid var(--workspace-border, #deded9);
}

.project-detail-tab {
    padding: .48rem .75rem;
    border: 1px solid var(--workspace-border, #d8d8d3);
    border-radius: var(--gestor-control-radius, 8px);
    background: var(--gestor-main-background, #fff);
    color: inherit;
    font: inherit;
    font-weight: 400;
    cursor: pointer;
}

.project-detail-tab:hover,
.project-detail-tab:focus-visible {
    border-color: var(--gestor-accent-color, #822222);
    background: color-mix(in srgb, var(--gestor-accent-color, #822222) 7%, var(--gestor-main-background, #fff));
}

.project-detail-tab.is-active {
    border-color: var(--gestor-accent-color, #822222);
    background: var(--gestor-accent-color, #822222);
    color: var(--gestor-accent-text-color, #fff);
}

.project-detail-tab span {
    opacity: .78;
}

.project-tab-panel {
    margin-top: 0;
}

.project-phase-context {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: 0 0 .75rem;
    padding: .5rem .65rem;
    border: 1px solid var(--workspace-border, #deded9);
    border-radius: var(--gestor-control-radius, 8px);
    background: color-mix(in srgb, var(--gestor-accent-color, #822222) 4%, var(--gestor-main-background, #fff));
}

.project-phase-context-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    margin-left: auto;
}

.phase-files-link {
    white-space: nowrap;
}

.task-editor-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.task-editor-grid > .form-group-full {
    grid-column: 1 / -1;
}

.task-editor-grid > .task-field-half {
    grid-column: span 3;
}

.task-editor-grid > .task-field-third {
    grid-column: span 2;
}

.note-editor-grid {
    grid-template-columns: minmax(0, 4fr) minmax(7rem, 1fr);
}

.note-editor-grid > .form-group-full {
    grid-column: 1 / -1;
}

.note-field-project {
    grid-column: 1;
}

.note-field-order {
    grid-column: 2;
}

.editor-title-input {
    font-weight: 600;
}

.linked-files-section {
    margin-top: .75rem;
}

@media (max-width: 760px) {
    .task-editor-grid,
    .note-editor-grid {
        grid-template-columns: 1fr;
    }

    .task-editor-grid > .task-field-half,
    .task-editor-grid > .task-field-third,
    .note-field-project,
    .note-field-order {
        grid-column: 1;
    }
}

.record-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: .65rem;
}

.record-card {
    min-width: 0;
    padding: .72rem .8rem;
    border: 1px solid var(--workspace-border, #e3e3df);
    border-radius: var(--gestor-control-radius, 8px);
    background: var(--gestor-main-background, #fff);
}

.record-card.is-selected {
    border-color: var(--gestor-accent-color, #822222);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--gestor-accent-color, #822222) 18%, transparent);
}

.record-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .65rem;
}

.record-card-title {
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--gestor-accent-color, #822222);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.record-card-title:hover {
    text-decoration: underline;
}

.record-card-indicator,
.record-card-subtitle,
.record-card-content {
    color: var(--workspace-muted, #6f6f69);
    font-size: .84rem;
}

.record-card-subtitle {
    margin-top: .18rem;
}

.record-card-content {
    display: grid;
    gap: .25rem;
    margin-top: .5rem;
}

.record-card-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .3rem;
    margin-top: .65rem;
    padding-top: .55rem;
    border-top: 1px solid var(--workspace-border, #e3e3df);
}

.record-card-badge {
    display: inline-flex;
    align-items: center;
    padding: .12rem .4rem;
    border-radius: 999px;
    background: var(--workspace-soft, #f8f8f6);
    color: var(--workspace-muted, #6f6f69);
    font-size: .76rem;
    white-space: nowrap;
}

.record-card-excerpt {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--gestor-text-color, #222);
}

.record-card-inline-field {
    display: grid;
    gap: 0.2rem;
    color: var(--color-texto-secundario, #666);
    font-size: 0.82rem;
}

.record-card-inline-field input,
.record-card-inline-select {
    width: 100%;
    min-width: 0;
    font: inherit;
}

.record-card-inline-field input {
    color: var(--color-texto-principal, #222);
}

.record-card-inline-select.activity-badge {
    width: auto;
    max-width: 8.5rem;
    padding: var(--gestor-label-padding-v, .12rem) 1.5rem var(--gestor-label-padding-v, .12rem) var(--gestor-label-padding-h, .45rem);
    cursor: pointer;
}
.sortable-header-button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 700 !important;
    text-transform: inherit;
    cursor: pointer;
}

/* La regla general de botones del área principal no debe rebajar el peso
   tipográfico de las cabeceras ordenables. */
.gestor-main .data-table th .sortable-header-button {
    font-weight: 700 !important;
}

.sortable-header-button:hover,
.sortable-header-button.is-active {
    color: var(--gestor-accent-color, #8f2024);
}

.sortable-header-arrow {
    font-size: .72em;
    line-height: 1;
}

.data-table th.numeric-header .sortable-header-button {
    width: 100%;
    justify-content: flex-end;
}

.entity-person-card .record-card-title {
    color: var(--gestor-accent-color, #822222);
    font-size: .94rem;
    font-weight: 700;
}

.entity-person-card .record-card-subtitle,
.entity-person-card .record-card-content {
    font-size: .78rem;
    line-height: 1.35;
}

.entity-person-card .record-card-subtitle {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: color-mix(in srgb, var(--gestor-main-text, #222) 78%, transparent);
}

.entity-person-card .record-card-content {
    color: color-mix(in srgb, var(--gestor-main-text, #222) 62%, transparent);
}

.entity-person-card .record-card-actions {
    margin-top: auto;
}

.file-type-pending-section {
    margin-top: 1.5rem;
}

.file-type-example {
    max-width: 24rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gestor-theme-dark {
    --workspace-border: #3b3d40;
    --workspace-soft: #242629;
    --workspace-muted: #b5b7ba;
    --workspace-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}

@media (prefers-color-scheme: dark) {
    .gestor-theme-system {
        --gestor-accent-color: #c46a6a !important;
        --gestor-menu-background: #202124 !important;
        --gestor-menu-text: #f2f2f2 !important;
        --gestor-menu-selected-text: #ffffff !important;
        --gestor-main-background: #151617 !important;
        --gestor-main-text: #f0f0f0 !important;
        --gestor-warning-background: #4a3b12 !important;
        --gestor-warning-text: #ffe39a !important;
        --workspace-border: #3b3d40;
        --workspace-soft: #242629;
        --workspace-muted: #b5b7ba;
        --workspace-shadow: 0 8px 24px rgba(0, 0, 0, .22);
    }
}

.appearance-page {
    padding-bottom: 5rem;
}

.appearance-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: 1rem;
}

.appearance-layout {
    display: grid;
    grid-template-columns: minmax(34rem, 1.15fr) minmax(24rem, .85fr);
    gap: 1.25rem;
    align-items: start;
}

.appearance-editor {
    display: grid;
    gap: .85rem;
}

.settings-card {
    margin-bottom: .85rem;
    padding: 1rem;
    border: 1px solid var(--workspace-border, #e3e3df);
    border-radius: 10px;
    background: var(--gestor-main-background, #fff);
}

.settings-card h2 {
    margin: 0 0 .85rem;
    font-size: 1rem;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem 1rem;
}

.settings-grid .form-group {
    margin: 0;
}

.unit-input,
.color-preference-input {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
}

.unit-input input,
.color-preference-input input[type="text"] {
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.unit-input span {
    display: inline-flex;
    align-items: center;
    padding: 0 .65rem;
    border: 1px solid #cfcfca;
    border-left: 0;
    border-radius: 0 5px 5px 0;
    background: var(--workspace-soft, #f8f8f6);
    color: var(--workspace-muted, #6f6f69);
    font-size: .8rem;
}

.color-preference-input {
    grid-template-columns: 2.75rem minmax(0, 1fr);
}

.color-preference-input input[type="color"] {
    width: 2.75rem;
    height: auto;
    min-height: 32px;
    padding: 2px;
    border-right: 0;
    border-radius: 5px 0 0 5px;
    cursor: pointer;
}

.theme-select-group {
    max-width: 24rem;
}

.appearance-preview-column {
    position: sticky;
    top: 1rem;
}

.appearance-preview-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .5rem;
}

.appearance-preview {
    display: grid;
    grid-template-columns: minmax(7rem, 28%) 1fr;
    min-height: 27rem;
    overflow: hidden;
    border: 1px solid var(--workspace-border, #deded9);
    border-radius: 12px;
    box-shadow: var(--workspace-shadow, 0 8px 24px rgba(0,0,0,.06));
    background: var(--gestor-main-background, #fff);
    color: var(--gestor-main-text, #222);
}

.preview-menu {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    padding: 1rem .65rem;
    background: var(--gestor-menu-background, #f7f7f5);
    color: var(--gestor-menu-text, #222);
}

.preview-menu strong {
    margin-bottom: .4rem;
}

.preview-menu span {
    padding: .3rem .45rem;
    border-radius: 6px;
}

.preview-menu span.active {
    color: var(--gestor-menu-selected-text, #822222);
    background: color-mix(in srgb, var(--gestor-accent-color, #822222) 10%, transparent);
}

.preview-main {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    min-width: 0;
    padding: 1rem;
    background: var(--gestor-main-background, #fff);
    color: var(--gestor-main-text, #222);
}

.preview-main h3 {
    margin: 0;
}

.preview-warning {
    padding: .55rem .7rem;
    border: 1px solid color-mix(in srgb, var(--gestor-warning-text, #5a4300) 25%, transparent);
    border-radius: 6px;
    background: var(--gestor-warning-background, #fff4cc);
    color: var(--gestor-warning-text, #5a4300);
}

.preview-main .data-table {
    margin-top: .35rem;
}

.preview-theme-dark {
    --workspace-border: #3b3d40;
    --workspace-soft: #242629;
    --workspace-muted: #b5b7ba;
}

@media (prefers-color-scheme: dark) {
    .preview-theme-system {
        --workspace-border: #3b3d40;
        --workspace-soft: #242629;
        --workspace-muted: #b5b7ba;
    }
}

.identity-logo-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.identity-logo-preview {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.checkbox-line {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: .85rem 0;
}

.appearance-action-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    justify-content: flex-end;
    gap: .45rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding: .7rem;
    border: 1px solid var(--workspace-border, #e3e3df);
    border-radius: 10px;
    background: color-mix(in srgb, var(--gestor-main-background, #fff) 94%, transparent);
    backdrop-filter: blur(8px);
}

@media (max-width: 1050px) {
    .appearance-layout {
        grid-template-columns: 1fr;
    }
    .appearance-preview-column {
        position: static;
    }
}

@media (max-width: 680px) {
    .settings-grid {
        grid-template-columns: 1fr;
    }
    .appearance-layout {
        display: block;
    }
}
.project-compact-filters {
    display: flex;
    align-items: end;
    gap: .65rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.project-compact-filters .form-group {
    margin: 0;
    min-width: 9rem;
}

.project-compact-filters .project-search-compact {
    width: 12rem;
    min-width: 10rem;
}

.project-year-control {
    width: 5.6rem;
}
.global-branding-section {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gestor-border-color, #d8d8d5);
}

.global-branding-grid {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(180px, 1fr);
    gap: 1rem;
    align-items: end;
}

.global-branding-preview {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.global-branding-preview img {
    max-width: 180px;
    max-height: 72px;
    object-fit: contain;
}

.global-branding-controls {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(5, minmax(110px, 1fr));
    gap: .75rem;
    align-items: end;
}

.scope-selection-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin: .75rem 0;
}

.scope-selection-summary {
    color: var(--gestor-muted-text, #666);
    margin-left: auto;
}

.entity-edit-form {
    display: grid;
    gap: .8rem;
}

.entity-form-section {
    border: 1px solid var(--gestor-border-color, #d8d8d5);
    border-radius: var(--gestor-control-radius, 6px);
    padding: .7rem;
    margin: 0;
}

.entity-form-section legend {
    padding: 0 .35rem;
    font-size: .9rem;
    font-weight: 600;
}

@media (max-width: 900px) {
    .global-branding-controls {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }
}
.task-colored-select,
.task-state-badge,
.task-priority-badge {
    border-radius: var(--gestor-label-radius, 999px);
    border: var(--gestor-label-border-width, 1px) solid currentColor;
}

.task-card-select {
    width: auto;
    max-width: 8.5rem;
    min-height: 1.7rem;
    padding: var(--gestor-label-padding-v, .12rem) 1.35rem var(--gestor-label-padding-v, .12rem) var(--gestor-label-padding-h, .45rem);
    font: inherit;
    cursor: pointer;
}

.workspace-page .data-table .task-colored-select {
    border: var(--gestor-label-border-width, 1px) solid currentColor !important;
    border-radius: var(--gestor-label-radius, 999px) !important;
    padding: var(--gestor-label-padding-v, .12rem) 1.25rem var(--gestor-label-padding-v, .12rem) var(--gestor-label-padding-h, .45rem);
}

.task-state-pendiente { background-color: var(--gestor-task-state-pending-bg, #f4f4f2) !important; color: var(--gestor-task-state-pending-text, #555); }
.task-state-encurso { background-color: var(--gestor-task-state-progress-bg, #e8f1ff) !important; color: var(--gestor-task-state-progress-text, #225b9b); }
.task-state-enespera { background-color: var(--gestor-task-state-waiting-bg, #fff6dc) !important; color: var(--gestor-task-state-waiting-text, #806015); }
.task-state-completada { background-color: var(--gestor-task-state-completed-bg, #e6f5e9) !important; color: var(--gestor-task-state-completed-text, #246b34); }
.task-state-cancelada { background-color: var(--gestor-task-state-cancelled-bg, #f3e9e9) !important; color: var(--gestor-task-state-cancelled-text, #7b3434); }
.task-priority-sinprioridad { background-color: var(--gestor-task-priority-none-bg, #f4f4f2) !important; color: var(--gestor-task-priority-none-text, #666); }
.task-priority-baja { background-color: var(--gestor-task-priority-low-bg, #edf7ef) !important; color: var(--gestor-task-priority-low-text, #367443); }
.task-priority-normal { background-color: var(--gestor-task-priority-normal-bg, #e8f1ff) !important; color: var(--gestor-task-priority-normal-text, #225b9b); }
.task-priority-alta { background-color: var(--gestor-task-priority-high-bg, #fff3d8) !important; color: var(--gestor-task-priority-high-text, #8a5a00); }
.task-priority-critica { background-color: var(--gestor-task-priority-critical-bg, #fde7e7) !important; color: var(--gestor-task-priority-critical-text, #9a2222); }

/* Los controles inline de las tablas usan fondo transparente con mayor
   especificidad. Estas reglas conservan el color semántico de los combos. */
.workspace-page .data-table .task-colored-select.task-state-pendiente { background-color: var(--gestor-task-state-pending-bg, #f4f4f2) !important; color: var(--gestor-task-state-pending-text, #555); }
.workspace-page .data-table .task-colored-select.task-state-encurso { background-color: var(--gestor-task-state-progress-bg, #e8f1ff) !important; color: var(--gestor-task-state-progress-text, #225b9b); }
.workspace-page .data-table .task-colored-select.task-state-enespera { background-color: var(--gestor-task-state-waiting-bg, #fff6dc) !important; color: var(--gestor-task-state-waiting-text, #806015); }
.workspace-page .data-table .task-colored-select.task-state-completada { background-color: var(--gestor-task-state-completed-bg, #e6f5e9) !important; color: var(--gestor-task-state-completed-text, #246b34); }
.workspace-page .data-table .task-colored-select.task-state-cancelada { background-color: var(--gestor-task-state-cancelled-bg, #f3e9e9) !important; color: var(--gestor-task-state-cancelled-text, #7b3434); }
.workspace-page .data-table .task-colored-select.task-priority-sinprioridad { background-color: var(--gestor-task-priority-none-bg, #f4f4f2) !important; color: var(--gestor-task-priority-none-text, #666); }
.workspace-page .data-table .task-colored-select.task-priority-baja { background-color: var(--gestor-task-priority-low-bg, #edf7ef) !important; color: var(--gestor-task-priority-low-text, #367443); }
.workspace-page .data-table .task-colored-select.task-priority-normal { background-color: var(--gestor-task-priority-normal-bg, #e8f1ff) !important; color: var(--gestor-task-priority-normal-text, #225b9b); }
.workspace-page .data-table .task-colored-select.task-priority-alta { background-color: var(--gestor-task-priority-high-bg, #fff3d8) !important; color: var(--gestor-task-priority-high-text, #8a5a00); }
.workspace-page .data-table .task-colored-select.task-priority-critica { background-color: var(--gestor-task-priority-critical-bg, #fde7e7) !important; color: var(--gestor-task-priority-critical-text, #9a2222); }

.appearance-preview-focused {
    display: block;
}

.appearance-preview-focused .preview-main {
    min-height: 26rem;
}

.appearance-preview .preview-form-section {
    margin-top: var(--gestor-section-gap, .75rem);
    padding-top: .65rem;
    border-top: 1px solid var(--workspace-border, #deded9);
}

.appearance-preview .preview-form-section h4 {
    margin: 0 0 .55rem;
}

.appearance-preview .preview-density-main .form-grid {
    row-gap: var(--gestor-form-gap-v, .5rem);
    column-gap: var(--gestor-form-gap-h, .75rem);
}

.appearance-preview .preview-project-state,
.appearance-preview .preview-view-defaults > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.appearance-preview .project-state-example {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #2f7d3a;
}

.appearance-preview .preview-view-defaults {
    display: grid;
    gap: .3rem;
    margin: .9rem 0 0;
}

.appearance-preview .preview-view-defaults dt {
    font-weight: 700;
}

.appearance-preview .preview-view-defaults dd {
    margin: 0;
}

.preview-semantic-main {
    display: grid;
    align-content: start;
    gap: 1rem;
}

.preview-semantic-group {
    display: grid;
    gap: .5rem;
}

.preview-semantic-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .55rem;
}

.preview-semantic-row label {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.appearance-preview.gestor-flat-headers .page-header {
    padding: 0;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.appearance-preview.gestor-square-controls * {
    border-radius: 0 !important;
}

.activity-badge-active {
    background-color: var(--gestor-active-bg, #e6f5e9);
    color: var(--gestor-active-text, #246b34);
    border: var(--gestor-label-border-width, 1px) solid currentColor;
}

.activity-badge-inactive {
    background-color: var(--gestor-inactive-bg, #fff3d8);
    color: var(--gestor-inactive-text, #7c5700);
    border: var(--gestor-label-border-width, 1px) solid currentColor;
}

.semantic-label,
.activity-badge,
.task-state-badge,
.task-priority-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: var(--gestor-label-padding-v, .12rem) var(--gestor-label-padding-h, .45rem);
    border-radius: var(--gestor-label-radius, 999px);
    font-size: .78rem;
    font-weight: 600;
}

input[type="checkbox"] {
    /* Un único color semántico para el estado marcado; el estado vacío
       conserva el aspecto neutro nativo. */
    accent-color: var(--gestor-checkbox-color, #822222);
}
.project-assignment-panel {
    margin-top: var(--gestor-section-gap, 0.8rem);
    padding: 1rem;
    border: 1px solid var(--workspace-border, #e3e3df);
    border-radius: var(--gestor-control-radius, 8px);
    background: var(--gestor-main-background, #fff);
}

.project-fields {
    margin: 0;
    padding: 0;
    min-inline-size: 0;
    border: 0;
}

.project-assignment-heading h2 {
    margin: 0;
    font-size: 1rem;
}

.project-assignment-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.project-assignment-heading p {
    margin: 0.2rem 0 0.85rem;
    color: var(--workspace-muted, #6f6f69);
}

.project-user-assigned-list {
    display: grid;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.project-user-assigned-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--workspace-border, #e3e3df);
    border-radius: var(--gestor-control-radius, 8px);
}

.project-assignment-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.75rem 1rem;
    margin: 0;
}

.project-assignment-summary dt {
    font-weight: 700;
}

.project-assignment-summary dd {
    margin: 0.15rem 0 0;
}

.project-assignment-workspace {
    display: grid;
    gap: 0.75rem;
}

.project-assignment-unit-toolbar {
    align-items: end;
    justify-content: space-between;
}

.project-assignment-unit-toolbar > div:first-child {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.75rem;
}

.project-assignment-unit-select {
    min-width: min(100%, 25rem);
}

.project-assignment-target {
    display: grid;
    grid-template-columns: minmax(16rem, 28rem) minmax(20rem, 1fr);
    align-items: end;
    gap: 1rem;
    padding: 0.8rem;
    border: 1px solid var(--workspace-border, #e3e3df);
    border-radius: var(--gestor-control-radius, 8px);
    background: color-mix(in srgb, var(--gestor-accent-color, #822222) 3%, var(--gestor-main-background, #fff));
}

.project-assignment-target p {
    margin: 0 0 0.25rem;
    color: var(--workspace-muted, #6f6f69);
}

.project-assignee-list {
    max-height: min(54vh, 42rem);
    overflow-y: auto;
    padding-right: 0.25rem;
}

.project-assignee-list .scope-project-item.is-modified {
    border-color: var(--gestor-accent-color, #822222);
    background: color-mix(in srgb, var(--gestor-accent-color, #822222) 6%, var(--gestor-main-background, #fff));
}

.project-current-assignment {
    margin-left: auto;
    white-space: nowrap;
}

.project-assignment-savebar {
    position: sticky;
    bottom: 0;
    z-index: 4;
    justify-content: flex-end;
    margin-top: 1rem;
    padding: 0.75rem;
    border: 1px solid var(--workspace-border, #e3e3df);
    background: color-mix(in srgb, var(--gestor-main-background, #fff) 94%, transparent);
    box-shadow: 0 -0.25rem 0.8rem rgba(0, 0, 0, 0.05);
}

@media (max-width: 900px) {
    .project-assignment-target {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .project-assignment-heading,
    .project-assignment-unit-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .project-assignment-unit-select {
        min-width: 0;
        width: 100%;
    }

    .project-current-assignment {
        width: 100%;
        margin-left: 1.75rem;
        white-space: normal;
    }
}