/* Organigrama moderno — Municipalidad de Quilleco (v2 glassmorphism) */



:root {

    --color-primary: #1e3a5f;

    --color-primary-light: #2c5282;

    --color-primary-dark: #152a45;

    --color-accent: #3d7ea6;

    --color-bg: #0f172a;

    --color-surface: rgba(255, 255, 255, 0.92);

    --color-surface-glass: rgba(255, 255, 255, 0.88);

    --color-border: rgba(255, 255, 255, 0.35);

    --color-border-light: rgba(255, 255, 255, 0.22);

    --color-text: #0f172a;

    --color-text-muted: #475569;

    --color-title-bg: #1e3a5f;

    --color-title-text: #ffffff;

    --color-hover: rgba(255, 255, 255, 0.95);

    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.12);

    --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.18);

    --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.22);

    --radius: 14px;

    --radius-sm: 8px;

    --font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

    --transition: 0.22s ease;

    --overlay-color: rgba(15, 23, 42, 0.48);

    --page-bg-image: url("../images/fondo-organigrama.png"), url("../images/fondo-organigrama.jpg");

    --connector-color: rgba(255, 255, 255, 0.72);
    --connector-width: 2.5px;

    --header-text: #ffffff;

    --header-accent: #93c5fd;

    --glass-blur: 14px;

    --glass-opacity: 0.9;

    /* Tarjetas principales — referencia CONCEJO */
    --org-card-width: 168px;
    --org-card-width-mayor: 192px;
    --org-card-photo-min-height-mayor: 128px;
    --org-card-gap: 0.75rem;
    --org-column-gap: 0.75rem;
    --org-card-photo-min-height: 112px;
    --org-card-photo-padding: 0.75rem;
    --org-card-title-padding: 0.6rem 0.85rem;
    --org-card-title-font-size: 0.78rem;
    --org-card-subtitle-font-size: 0.68rem;
    --org-card-image-max-height: calc(var(--org-card-photo-min-height) - (2 * var(--org-card-photo-padding)));
    --org-card-title-block-height: 2.05rem;
    --org-card-subtitle-block-height: 1.35rem;
    --org-card-header-height: calc(var(--org-card-title-block-height) + var(--org-card-subtitle-block-height));
    --org-card-height: calc(var(--org-card-header-height) + var(--org-card-photo-min-height));
    --org-admin-max-rows: 6;

}



*,

*::before,

*::after {

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

}



body {

    margin: 0;

    font-family: var(--font);

    font-size: 16px;

    line-height: 1.5;

    color: var(--color-text);

    background: var(--color-bg);

    -webkit-font-smoothing: antialiased;

    min-height: 100vh;

}



body::before {

    content: "";

    position: fixed;

    inset: 0;

    z-index: -2;

    background-color: var(--color-bg);

    background-image: var(--page-bg-image);

    background-size: cover;

    background-position: center center;

    background-attachment: fixed;

    background-repeat: no-repeat;

}



body::after {

    content: "";

    position: fixed;

    inset: 0;

    z-index: -1;

    background: var(--overlay-color);

    pointer-events: none;

}



img {

    max-width: 100%;

    height: auto;

    display: block;

}



a {

    color: var(--color-primary-light);

    text-decoration: none;

    transition: color var(--transition);

}



a:hover {

    color: var(--color-accent);

}



/* ── Page layout ── */



.page {

    max-width: 1440px;

    margin: 0 auto;

    padding: 1.75rem 1.25rem 3.5rem;

    position: relative;

}



.page-header {

    text-align: center;

    margin-bottom: 2.75rem;

}



.back-link {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.65rem 1.35rem;

    margin-bottom: 1.75rem;

    background: rgba(255, 255, 255, 0.15);

    backdrop-filter: blur(var(--glass-blur));

    -webkit-backdrop-filter: blur(var(--glass-blur));

    color: var(--header-text);

    border: 1px solid rgba(255, 255, 255, 0.35);

    border-radius: var(--radius);

    font-weight: 600;

    font-size: 0.95rem;

    box-shadow: var(--shadow-sm);

    transition: background var(--transition), box-shadow var(--transition), transform var(--transition), border-color var(--transition);

}



.back-link:hover {

    background: rgba(255, 255, 255, 0.25);

    color: var(--header-text);

    box-shadow: var(--shadow-md);

    transform: translateY(-1px);

    border-color: rgba(255, 255, 255, 0.55);

}



.back-link__icon {

    width: 1.25rem;

    height: 1.25rem;

    fill: currentColor;

    flex-shrink: 0;

}



.page-header__brand h1 {

    margin: 0 0 0.4rem;

    font-size: clamp(1.65rem, 3.5vw, 2.35rem);

    font-weight: 800;

    color: var(--header-text);

    letter-spacing: -0.02em;

    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);

}



.page-header__subtitle {

    margin: 0;

    color: var(--header-accent);

    font-size: 1.05rem;

    font-weight: 500;

    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);

}



.page-footer {

    margin-top: 3.5rem;

    padding: 1rem 1.5rem;

    border-radius: var(--radius);

    text-align: center;

    color: rgba(255, 255, 255, 0.9);

    font-size: 0.9rem;

    background: rgba(255, 255, 255, 0.1);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.2);

}



.page-footer p {

    margin: 0;

}



/* ── Admin bar (sesión activa) ── */



.org-admin-bar {

    position: fixed;

    bottom: 1.25rem;

    right: 1.25rem;

    z-index: 1000;

    display: flex;

    flex-wrap: wrap;

    gap: 0.5rem;

    padding: 0.65rem 0.85rem;

    background: rgba(30, 58, 95, 0.92);

    backdrop-filter: blur(12px);

    border-radius: 12px;

    border: 1px solid rgba(255, 255, 255, 0.25);

    box-shadow: var(--shadow-lg);

}



.org-admin-bar.hidden {

    display: none;

}



.org-admin-bar__label {

    color: #fff;

    font-size: 0.82rem;

    font-weight: 600;

    align-self: center;

    padding-right: 0.35rem;

}



.org-admin-bar button,

.org-admin-bar a {

    padding: 0.45rem 0.75rem;

    border-radius: 8px;

    font-size: 0.82rem;

    font-weight: 600;

    border: none;

    cursor: pointer;

    text-decoration: none;

    font-family: inherit;

}



.org-admin-bar__btn {

    background: #fff;

    color: var(--color-primary);

}



.org-admin-bar__btn--ghost {

    background: rgba(255, 255, 255, 0.15);

    color: #fff;

}



.org-card.is-admin-editable {

    cursor: pointer;

    outline: 2px dashed transparent;

    outline-offset: 3px;

    transition: outline-color var(--transition), transform var(--transition);

}



.org-card.is-admin-editable:hover {

    outline-color: rgba(147, 197, 253, 0.85);

}



/* ── Org chart cards ── */



.org-card {

    background: var(--color-surface-glass);

    backdrop-filter: blur(var(--glass-blur));

    -webkit-backdrop-filter: blur(var(--glass-blur));

    border: 1px solid var(--color-border);

    border-radius: var(--radius);

    overflow: hidden;

    box-shadow: var(--shadow-md);

    transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);

    width: var(--org-card-width);

    max-width: 100%;

    flex: 0 0 var(--org-card-width);

    height: var(--org-card-height);

    min-height: var(--org-card-height);

    max-height: var(--org-card-height);

    display: flex;

    flex-direction: column;

}



.org-card:hover,
a.org-card--link:hover {

    box-shadow: var(--shadow-lg);

    border-color: rgba(255, 255, 255, 0.55);

    transform: translateY(-3px);

}



a.org-card--link {

    display: block;

    text-decoration: none;

    color: inherit;

    cursor: pointer;

}



a.org-card--link:focus-visible {

    outline: 3px solid var(--header-accent);

    outline-offset: 3px;

}



.org-card--glass {

    background: rgba(255, 255, 255, var(--glass-opacity, 0.9));

}



.org-card--accent {

    border-width: 2px;

    border-color: rgba(255, 255, 255, 0.6);

    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.28);

}



.org-card__title {

    display: block;

    padding: var(--org-card-title-padding);

    background: var(--card-accent, var(--color-title-bg));

    color: var(--color-title-text);

    font-weight: 700;

    font-size: var(--org-card-title-font-size);

    text-align: center;

    letter-spacing: 0.05em;

    text-transform: uppercase;

    transition: background var(--transition), filter var(--transition);

    flex-shrink: 0;

}



.org-card:hover .org-card__title {

    filter: brightness(1.08);

}



.org-card__subtitle {

    display: block;

    padding: 0.25rem 0.75rem 0.45rem;

    background: var(--card-accent, var(--color-title-bg));

    color: rgba(255, 255, 255, 0.88);

    font-size: var(--org-card-subtitle-font-size);

    font-weight: 500;

    text-align: center;

    letter-spacing: 0.02em;

    margin-top: -0.15rem;

    border-bottom: 1px solid rgba(255, 255, 255, 0.15);

    flex-shrink: 0;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.org-card__photo {

    display: flex;

    align-items: center;

    justify-content: center;

    padding: var(--org-card-photo-padding);

    background: rgba(255, 255, 255, 0.45);

    overflow: hidden;

    flex: 1 1 auto;

    min-height: 0;

    font-size: 0;

    line-height: 0;

    color: transparent;

    transition: background var(--transition);

}



.org-card__photo:hover {

    background: rgba(255, 255, 255, 0.65);

}



.org-card__photo--static {

    cursor: default;

}



.org-card__photo--static:hover {

    background: rgba(255, 255, 255, 0.45);

}



.org-card__photo img {

    display: block;

    margin: auto;

    flex-shrink: 0;

    border-radius: var(--radius-sm);

    object-fit: contain;

    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);

    width: auto;

    height: auto;

    max-width: 100%;

    max-height: var(--org-card-image-max-height);

    font-size: 0;

    text-indent: -9999px;

    overflow: hidden;

}



.org-card__photo--icon img,
.org-card__photo--contain img {

    object-fit: contain;

    border-radius: 12px;

    box-shadow: none;

    width: auto;

    height: auto;

    max-width: calc(100% - 0.25rem);

    max-height: var(--org-card-image-max-height);

}



.org-card__photo--cover {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
}

.org-card__photo--cover img {
    object-fit: cover;
    object-position: center top;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
}



.org-card__photo--small {

    min-height: 0;

    padding: var(--org-card-photo-padding);

}



.org-card__photo--large {

    min-height: 0;

}



.org-card__photo--large img {

    object-fit: contain;

    max-width: 92%;

    max-height: var(--org-card-image-max-height);

    border-radius: 14px;

    box-shadow: none;

}



.org-card__photo--hidden {

    display: none;

}



.org-card--mayor {

    border-width: 2px;

    border-color: rgba(251, 191, 36, 0.85);

    box-shadow:
        0 0 0 1px rgba(251, 191, 36, 0.35),
        0 14px 36px rgba(15, 23, 42, 0.32),
        0 0 28px rgba(251, 191, 36, 0.18);

    position: relative;

    z-index: 4;

}



.org-card--mayor .org-card__title {

    background: linear-gradient(135deg, var(--card-accent, var(--color-title-bg)) 0%, #2c5282 100%);

    box-shadow: inset 0 -2px 0 rgba(251, 191, 36, 0.55);

}

.org-level--top .org-center .org-card--mayor,
.org-advisory .org-card--mayor {
    width: var(--org-card-width-mayor);
    flex: 0 0 var(--org-card-width-mayor);
}

.org-card--mayor .org-card__photo {
    min-height: var(--org-card-photo-min-height-mayor);
    padding: 0;
}

.org-card--mayor .org-card__photo img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center top;
    border-radius: 0;
    box-shadow: none;
}




/* ── Sub-unit lists ── */



.org-sublist {

    list-style: none;

    margin: 0.85rem 0 0;

    padding: 0;

    display: flex;

    flex-direction: column;

    gap: 0.4rem;

}



.org-advisory--with-sublist {

    flex-direction: column;

    align-items: stretch;

    width: var(--org-card-width);

    max-width: 100%;

}



.org-advisory--with-subcards {

    flex-direction: column;

    align-items: stretch;

    width: var(--org-card-width);

    max-width: 100%;

    gap: var(--org-card-gap);

}



.org-advisory--with-subcards > .org-subcards {

    margin-top: 0;

}



.org-advisory--with-nested {

    flex-direction: column;

    align-items: stretch;

    width: max-content;

    max-width: 100%;

}



/* ── Nested sub-cards (CONCEJO concejales inside panel) ── */



.org-card--container {

    width: auto;

    max-width: min(100%, 360px);

    flex: 0 0 auto;

}



.org-card--concejo-panel .org-card__body {

    padding: 0.65rem;

    background: rgba(255, 255, 255, 0.35);

}



.org-nested-cards {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 0.55rem;

    width: 100%;

}



.org-card--nested {

    width: 100%;

    flex: 0 0 auto;

    box-shadow: var(--shadow-sm);

}



.org-card--nested .org-card__title {

    font-size: 0.62rem;

    letter-spacing: 0.02em;

    text-transform: none;

    line-height: 1.25;

    padding: 0.4rem 0.5rem;

}



.org-card--nested .org-card__subtitle {

    font-size: 0.56rem;

    padding: 0.1rem 0.5rem 0.3rem;

}



.org-card--nested .org-card__photo {

    min-height: 58px;

    padding: 0.4rem;

}



.org-card--nested .org-card__photo img {

    max-height: 52px;

}



/* ── Full-size sub-cards (DIDECO, DAF, SEMU, DOM) ── */



.org-subcards {

    display: flex;

    flex-direction: column;

    gap: var(--org-card-gap);

    margin-top: var(--org-card-gap);

    width: var(--org-card-width);

}



.org-subcards .org-card,

.org-subcards .org-card--subcard,

.org-subcards a.org-card {

    width: var(--org-card-width);

    flex: 0 0 var(--org-card-width);

    height: var(--org-card-height);

    min-height: var(--org-card-height);

    max-height: var(--org-card-height);

    display: flex;

    flex-direction: column;

}



.org-subcards .org-card__title {

    font-size: var(--org-card-title-font-size);

    letter-spacing: 0.05em;

    text-transform: uppercase;

    line-height: 1.3;

    padding: var(--org-card-title-padding);

}



.org-subcards .org-card__photo,
.org-card--subcard .org-card__photo,
.org-card--unit .org-card__photo,
.org-card--standalone .org-card__photo {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: var(--org-card-photo-min-height);

    padding: var(--org-card-photo-padding);

}



.org-subcards .org-card__photo img,
.org-card--subcard .org-card__photo img {

    width: auto;

    height: auto;

    max-width: calc(100% - 0.25rem);

    max-height: var(--org-card-image-max-height);

    margin: auto;

    object-fit: contain;

}



.org-admin-unit--with-subcards {

    align-self: start;

}



/* Altura fija — tarjetas de unidades y sub-unidades alinean filas */

.org-column--dideco .org-card,

.org-admin-unit .org-card,

.org-card--standalone,

.org-column--dideco a.org-card,

.org-admin-unit a.org-card {

    height: var(--org-card-height);

    min-height: var(--org-card-height);

    max-height: var(--org-card-height);

    display: flex;

    flex-direction: column;

    overflow: hidden;

}



.org-column--dideco .org-card .org-card__photo,

.org-admin-unit .org-card .org-card__photo,

.org-card--standalone .org-card__photo {

    flex: 1 1 auto;

    min-height: 0;

}



.org-card--subcard .org-card__title {

    flex-shrink: 0;

}



.org-card--concejal .org-card__title {

    text-transform: none;

    letter-spacing: 0.02em;

}



.org-sublist li a {

    display: block;

    padding: 0.5rem 0.7rem;

    background: rgba(255, 255, 255, 0.82);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

    border: 1px solid rgba(255, 255, 255, 0.45);

    border-radius: var(--radius-sm);

    color: var(--color-primary-dark);

    font-size: 0.76rem;

    font-weight: 600;

    text-align: center;

    line-height: 1.35;

    transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);

}



.org-sublist li a:hover {

    background: rgba(255, 255, 255, 0.95);

    border-color: rgba(255, 255, 255, 0.7);

    color: var(--color-primary);

    transform: translateY(-1px);

}



.org-sublist__title {

    display: block;

}



.org-sublist__subtitle {

    display: block;

    margin-top: 0.15rem;

    font-size: 0.68rem;

    font-weight: 500;

    color: var(--color-text-muted);

    line-height: 1.25;

}



.org-sublist--standalone {

    margin-top: 0;

    justify-content: center;

    min-height: 100%;

}



.org-sublist--standalone li a {

    padding: 0.7rem;

    font-size: 0.82rem;

}



/* ── Chart wrapper + SVG connectors ── */

.org-chart {
    position: relative;
    width: 100%;
}

.org-connectors {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
}

.org-chart__content {
    position: relative;
    z-index: 2;
}

.org-card,
.org-sublist {
    position: relative;
    z-index: 2;
}

/* ── Level 1: Top ── */



.org-level--top {

    display: grid;

    grid-template-columns: 1fr auto 1fr;

    align-items: start;

    gap: 1.25rem;

    margin-bottom: 0;

    position: relative;

}



.org-advisory {

    display: flex;

    justify-content: center;

    padding-top: 2.25rem;

    position: relative;

    z-index: 3;

}



.org-level--top .org-advisory .org-card,

.org-level--top .org-center .org-card {

    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.28);

    border-color: rgba(255, 255, 255, 0.55);

}



.org-advisory--left {

    justify-content: flex-end;

    padding-right: 1.25rem;

}



.org-advisory--right {

    justify-content: flex-start;

    padding-left: 1.25rem;

}



.org-center {

    display: flex;

    justify-content: center;

    position: relative;

    z-index: 3;

}



.org-advisory .org-card,

.org-center .org-card,

.org-branch .org-card,

.org-column--dideco .org-card,

.org-admin-unit .org-card {

    width: var(--org-card-width);

    max-width: 100%;

}



.org-level--top::before,
.org-center::after,
.org-level--directorates::before,
.org-branch::before,
.org-column--dideco::before,
.org-column--admin::before {
    display: none;
}



/* ── Level 2: Directorates ── */



.org-level--directorates {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: var(--org-column-gap);

    margin-top: 2.25rem;

    padding-top: 1.75rem;

    position: relative;

}



.org-level--directorates::before {
    display: none;
}



.org-branch {

    position: relative;

    flex: 0 0 var(--org-card-width);

}



.org-branch::before {
    display: none;
}



.org-branch .org-card {

    width: 100%;

    height: var(--org-card-height);

    min-height: var(--org-card-height);

    max-height: var(--org-card-height);

}



/* ── Level 3: Units ── */



.org-level--units {
    display: grid;
    grid-template-columns: var(--org-card-width) auto;
    column-gap: var(--org-column-gap);
    row-gap: var(--org-card-gap);
    margin-top: 1.5rem;
    padding-top: 0.5rem;
    align-items: start;
    justify-content: center;
}



.org-column--dideco {

    position: relative;

    display: flex;

    flex-direction: column;

    gap: var(--org-card-gap);

}



.org-column--dideco > .org-subcards {

    display: contents;

    margin-top: 0;

    width: auto;

}



.org-column--dideco::before,
.org-column--admin::before {
    display: none;
}



.org-column--dideco .org-card {

    width: 100%;

}



.org-column--admin {
    grid-column: 2;
    position: relative;
}

.org-admin-grid {
    display: grid;
    grid-template-columns: repeat(4, var(--org-card-width)) var(--org-card-width);
    column-gap: var(--org-column-gap);
    row-gap: var(--org-card-gap);
    grid-template-rows: repeat(var(--org-admin-max-rows), var(--org-card-height));
    align-items: start;
    padding-top: 1.25rem;
    justify-content: start;
    width: max-content;
}



.org-admin-unit {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span var(--org-admin-max-rows);
    align-self: stretch;
}

.org-admin-unit > .org-subcards {
    display: contents;
    margin-top: 0;
    width: auto;
}

.org-admin-unit .org-card {

    width: 100%;

}



.org-admin-unit--standalone {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span var(--org-admin-max-rows);
    align-items: stretch;
    padding-top: 0;
    grid-column: 5;
}

.org-card--standalone {
    width: var(--org-card-width);
    max-width: 100%;
}

.org-card--featured {
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.24);
    border-color: rgba(255, 255, 255, 0.55);
}



/* ── Inline edit modal ── */



.org-edit-modal {

    position: fixed;

    inset: 0;

    z-index: 2000;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 1rem;

    background: rgba(15, 23, 42, 0.65);

    backdrop-filter: blur(4px);

}



.org-edit-modal.hidden {

    display: none;

}



.org-edit-modal__panel {

    width: min(560px, 100%);

    max-height: 90vh;

    overflow-y: auto;

    background: #fff;

    border-radius: 14px;

    padding: 1.25rem;

    box-shadow: var(--shadow-lg);

}



.org-edit-modal__header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 1rem;

}



.org-edit-modal__header h2 {

    margin: 0;

    font-size: 1.15rem;

    color: var(--color-primary);

}



.org-edit-modal__tabs {

    display: flex;

    gap: 0.35rem;

    margin-bottom: 1rem;

}



.org-edit-modal__tab {

    flex: 1;

    padding: 0.55rem;

    border: 1px solid var(--color-border-light);

    background: #f8fafc;

    border-radius: 8px;

    font: inherit;

    font-weight: 600;

    font-size: 0.85rem;

    cursor: pointer;

    color: var(--color-text-muted);

}



.org-edit-modal__tab.is-active {

    background: var(--color-primary);

    color: #fff;

    border-color: var(--color-primary);

}



.org-edit-modal__grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 0.65rem;

}



.org-edit-modal__grid label {

    display: flex;

    flex-direction: column;

    gap: 0.25rem;

    font-size: 0.78rem;

    font-weight: 600;

    color: var(--color-text-muted);

}



.org-edit-modal__grid input,

.org-edit-modal__grid select {

    padding: 0.5rem 0.6rem;

    border: 1px solid #d8e0ea;

    border-radius: 6px;

    font: inherit;

}



.org-edit-modal__checks {

    display: flex;

    flex-wrap: wrap;

    gap: 0.75rem;

    margin-top: 0.75rem;

}



.org-edit-modal__actions {

    display: flex;

    gap: 0.5rem;

    margin-top: 1rem;

    justify-content: flex-end;

}



.org-edit-modal__actions button {

    padding: 0.55rem 1rem;

    border-radius: 8px;

    border: none;

    font: inherit;

    font-weight: 600;

    cursor: pointer;

}



.org-edit-modal__save {

    background: var(--color-primary);

    color: #fff;

}



.org-edit-modal__cancel {

    background: #e8eef5;

    color: var(--color-primary);

}



.org-edit-pane.hidden {

    display: none;

}



/* ── Responsive ── */



@supports not (grid-template-rows: subgrid) {

    .org-admin-grid {
    display: grid;
    grid-template-columns: repeat(4, var(--org-card-width)) var(--org-card-width);
    column-gap: var(--org-column-gap);
    row-gap: var(--org-card-gap);
    grid-template-rows: repeat(var(--org-admin-max-rows), var(--org-card-height));
    align-items: start;
    padding-top: 1.25rem;
    justify-content: start;
    width: max-content;
}



    .org-admin-unit,

    .org-admin-unit--standalone {

        display: flex;

        flex-direction: column;

        gap: var(--org-card-gap);

        grid-row: auto;

    }



    .org-admin-unit > .org-subcards {

        display: flex;

        flex-direction: column;

        gap: var(--org-card-gap);

        margin-top: 0;

        width: var(--org-card-width);

    }

}



@media (max-width: 1100px) {
    .org-admin-grid {
    display: grid;
    grid-template-columns: repeat(4, var(--org-card-width)) var(--org-card-width);
    column-gap: var(--org-column-gap);
    row-gap: var(--org-card-gap);
    grid-template-rows: repeat(var(--org-admin-max-rows), var(--org-card-height));
    align-items: start;
    padding-top: 1.25rem;
    justify-content: start;
    width: max-content;
}

    .org-admin-unit--standalone {
        grid-column: span 2;
        grid-row: auto;
    }
}



@media (max-width: 900px) {

    .org-level--top {

        grid-template-columns: 1fr;

        gap: 1.5rem;

    }



    .org-level--top::before,

    .org-center::after,

    .org-level--directorates::before,

    .org-branch::before,

    .org-column--dideco::before,

    .org-column--admin::before {

        display: none;

    }



    .org-advisory {

        padding: 0;

        justify-content: center;

    }



    .org-level--units {
    display: grid;
    grid-template-columns: var(--org-card-width) auto;
    column-gap: var(--org-column-gap);
    row-gap: var(--org-card-gap);
    margin-top: 1.5rem;
    padding-top: 0.5rem;
    align-items: start;
    justify-content: center;
}



    .org-column--admin {

        grid-column: 1;

    }



    .org-admin-grid {
    display: grid;
    grid-template-columns: repeat(4, var(--org-card-width)) var(--org-card-width);
    column-gap: var(--org-column-gap);
    row-gap: var(--org-card-gap);
    grid-template-rows: repeat(var(--org-admin-max-rows), var(--org-card-height));
    align-items: start;
    padding-top: 1.25rem;
    justify-content: start;
    width: max-content;
}



    .org-admin-unit--standalone {

        grid-column: span 2;

    }

}



@media (max-width: 600px) {

    .page {

        padding: 1rem 0.75rem 2.5rem;

    }



    body::before {

        background-attachment: scroll;

    }



    .org-advisory .org-card,

    .org-center .org-card,

    .org-advisory .org-card--container {

        width: 100%;

        max-width: 240px;

    }



    .org-card--container {

        max-width: min(100%, 320px);

    }



    .org-nested-cards {

        grid-template-columns: 1fr;

    }



    .org-level--directorates {

        flex-direction: column;

        align-items: center;

    }



    .org-branch {

        flex: 0 0 auto;

        width: 100%;

        max-width: 240px;

    }



    .org-admin-grid {
    display: grid;
    grid-template-columns: repeat(4, var(--org-card-width)) var(--org-card-width);
    column-gap: var(--org-column-gap);
    row-gap: var(--org-card-gap);
    grid-template-rows: repeat(var(--org-admin-max-rows), var(--org-card-height));
    align-items: start;
    padding-top: 1.25rem;
    justify-content: start;
    width: max-content;
}



    .org-admin-unit--standalone {

        grid-column: 1;

    }



    .org-sublist li a {

        font-size: 0.85rem;

        padding: 0.6rem 0.8rem;

    }



    .org-edit-modal__grid {

        grid-template-columns: 1fr;

    }



    .org-admin-bar {

        left: 0.75rem;

        right: 0.75rem;

        bottom: 0.75rem;

        justify-content: center;

    }

}



/* ── Collapsible sections (mobile) ── */



.org-column.is-collapsible .org-column__toggle {

    display: none;

}



@media (max-width: 600px) {

    .org-column.is-collapsible .org-column__toggle {

        display: flex;

        align-items: center;

        justify-content: space-between;

        width: 100%;

        padding: 0.8rem 1rem;

        margin-bottom: 0.85rem;

        background: rgba(30, 58, 95, 0.88);

        backdrop-filter: blur(10px);

        color: var(--color-title-text);

        border: 1px solid rgba(255, 255, 255, 0.3);

        border-radius: var(--radius);

        font-family: var(--font);

        font-size: 0.9rem;

        font-weight: 700;

        cursor: pointer;

        transition: background var(--transition);

    }



    .org-column.is-collapsible .org-column__toggle:hover {

        background: rgba(44, 82, 130, 0.92);

    }



    .org-column.is-collapsible .org-column__toggle-icon {

        transition: transform var(--transition);

    }



    .org-column.is-collapsible.is-open .org-column__toggle-icon {

        transform: rotate(180deg);

    }



    .org-column.is-collapsible .org-column__content {

        display: none;

    }



    .org-column.is-collapsible.is-open .org-column__content {

        display: block;

    }

}



/* ── Print ── */



@media print {

    body::before,

    body::after {

        display: none;

    }



    body {

        background: white;

        color: black;

    }



    .back-link,

    .org-admin-bar,

    .org-edit-modal {

        display: none !important;

    }



    .org-card {

        break-inside: avoid;

        box-shadow: none;

        background: white;

    }



    .org-card:hover {

        transform: none;

    }

}



.org-loading,

.org-error {

    text-align: center;

    padding: 2rem 1rem;

    color: rgba(255, 255, 255, 0.9);

    font-size: 1rem;

}



.org-error {

    color: #fecaca;

    background: rgba(180, 35, 24, 0.35);

    border: 1px solid rgba(254, 205, 202, 0.5);

    border-radius: var(--radius);

}