/* ==========================================================================
   SOCHICIT - Páginas internas institucionales
   Se carga después de sochicit.css y reutiliza sus variables.
   Índice: 1 Cabecera interna · 2 Sección editorial · 3 Propósito
           4 Ejes institucionales · 5 Alcance y CTA · 6 Responsive
   ========================================================================== */


/* 1. CABECERA INTERNA
   -------------------------------------------------------------------------- */
.internal-hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(2rem, 4vw, 3.25rem) clamp(2.25rem, 4.5vw, 3.75rem);
    background: var(--sochicit-light);
    border-bottom: 1px solid var(--sochicit-border);
}

/* Marca de agua arquitectónica: parcial, tenue y fuera del flujo. */
.internal-hero__watermark {
    position: absolute;
    z-index: 0;
    top: -22%;
    right: -14rem;
    width: 38rem;
    height: auto;
    opacity: 0.04;
    pointer-events: none;
    user-select: none;
}

.internal-hero__inner {
    position: relative;
    z-index: 1;
}

.internal-hero__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 2rem;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.internal-hero__top .section-label {
    margin: 0;
}

.internal-hero__top form {
    margin: 0;
}

.internal-hero__top .link-arrow--button {
    font: inherit;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.internal-breadcrumb {
    font-size: 0.875rem;
}

.internal-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--sochicit-muted);
}

.internal-breadcrumb li {
    display: inline-flex;
    list-style: none;
}

.internal-breadcrumb li + li::before {
    content: "/";
    margin-right: 0.6rem;
    color: #8A97A1;
}

.internal-breadcrumb a {
    color: var(--sochicit-petrol);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.internal-breadcrumb a:hover {
    color: var(--sochicit-navy);
    text-decoration-thickness: 2px;
}

.internal-breadcrumb [aria-current="page"] {
    font-weight: 600;
    color: var(--sochicit-navy);
}

.internal-hero__title {
    margin-bottom: 1.25rem;
    font-size: clamp(2.5rem, 5.5vw, 4.25rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
}

.internal-hero__accent,
.purpose-section__accent,
.scope-cta__line {
    display: flex;
    gap: 0.5rem;
}

.internal-hero__brand {
    width: fit-content;
    max-width: 100%;
}

.internal-hero__accent {
    margin-bottom: 1.5rem;
}

.internal-hero__accent span,
.purpose-section__accent span,
.scope-cta__line span {
    flex: 1 1 0;
    height: 4px;
    border-radius: 2px;
}

.internal-hero__accent span {
    flex: 0 0 calc((100% - 0.5rem) / 2);
}

.internal-hero__accent span:first-child,
.purpose-section__accent span:first-child,
.scope-cta__line span:first-child {
    background: var(--sochicit-chile-blue);
}

.internal-hero__accent span:last-child,
.purpose-section__accent span:last-child,
.scope-cta__line span:last-child {
    background: var(--sochicit-red);
}

.internal-hero__lead {
    max-width: 40rem;
    margin: 0;
    font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
    color: var(--sochicit-muted);
}


/* 2. SECCIÓN EDITORIAL (Nuestra sociedad)
   -------------------------------------------------------------------------- */
.editorial-section {
    padding-block: clamp(4rem, 8vw, 7.5rem);
    background: var(--sochicit-white);
}

.editorial-section__grid {
    display: grid;
    gap: 3rem clamp(3rem, 6vw, 7rem);
}

.editorial-title {
    margin-bottom: 0;
    font-size: clamp(1.9rem, 3.4vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    text-wrap: balance;
}

.editorial-text {
    max-width: 38rem;
    margin: 2rem 0 0;
    font-size: clamp(1.125rem, 1.5vw, 1.3rem);
    line-height: 1.75;
    color: var(--sochicit-graphite);
}

.editorial-facts {
    margin: 0;
    padding: 0;
    list-style: none;
}

.editorial-facts li {
    padding-block: clamp(1.5rem, 2.6vw, 2.25rem);
    border-top: 1px solid var(--sochicit-border);
    font-family: var(--font-heading);
    font-size: clamp(1.35rem, 2.2vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--sochicit-navy);
}

.editorial-facts li:last-child {
    border-bottom: 1px solid var(--sochicit-border);
}


/* 3. PROPÓSITO
   -------------------------------------------------------------------------- */
.purpose-section {
    position: relative;
    overflow: hidden;
    padding-block: clamp(4.5rem, 9vw, 8.75rem);
    background: var(--sochicit-navy);
    color: var(--sochicit-white);
}

.purpose-section .container-wide {
    position: relative;
    z-index: 1;
}

.purpose-section__watermark {
    position: absolute;
    z-index: 0;
    top: 56%;
    right: -15rem;
    width: 46rem;
    height: auto;
    filter: brightness(0) invert(1);
    opacity: 0.05;
    pointer-events: none;
    user-select: none;
    transform: translateY(-50%);
}

.purpose-section__eyebrow {
    margin-bottom: 1.75rem;
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
}

.purpose-section__statement {
    max-width: 58rem;
    margin: 0;
    font-size: clamp(2.3rem, 4vw, 4.4rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--sochicit-white);
}

.purpose-section__accent {
    width: clamp(8rem, 11vw, 10.5rem);
    margin-top: 2.5rem;
}


/* 4. EJES INSTITUCIONALES (Cómo lo hacemos)
   -------------------------------------------------------------------------- */
.institutional-pillars {
    padding-block: clamp(3.5rem, 6.2vw, 5.4rem) clamp(4rem, 8vw, 7rem);
    background: var(--sochicit-white);
}

.institutional-pillars__header {
    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.institutional-pillars__intro {
    max-width: 40rem;
    margin: 0;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-weight: 500;
    line-height: 1.45;
    color: var(--sochicit-navy);
}

.institutional-pillars__list {
    display: grid;
    gap: 2.5rem clamp(1.5rem, 3.5vw, 4rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.institutional-pillar {
    position: relative;
    margin: 0;
    padding: 2rem 0 0;
    border-top: 1px solid var(--sochicit-border);
    list-style: none;
}

.institutional-pillar::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    width: 2.5rem;
    height: 3px;
    background: var(--sochicit-chile-blue);
}

.institutional-pillar__number {
    display: block;
    margin-bottom: 1.5rem;
    font-family: var(--font-heading);
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--sochicit-petrol);
    opacity: 0.3;
}

.institutional-pillar__title {
    margin: 0 0 0.75rem;
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
    font-weight: 800;
}

.institutional-pillar__text {
    max-width: 26rem;
    margin: 0;
    font-size: 1.0625rem;
    color: var(--sochicit-muted);
}


/* 5. ALCANCE Y CTA
   -------------------------------------------------------------------------- */
.scope-cta {
    padding-block: clamp(4rem, 8vw, 7rem);
    background: var(--sochicit-ice);
}

.scope-cta__grid {
    display: grid;
    gap: 3.5rem clamp(3rem, 6vw, 6rem);
}

.scope-cta__line {
    width: min(24.6em, 100%);
    margin-top: 2.5rem;
    font-size: clamp(1.125rem, 1.5vw, 1.3rem);
}

.scope-cta__line span {
    flex: 0 0 calc((100% - 0.5rem) / 2);
}

.scope-cta__cta {
    padding-top: 2.5rem;
    border-top: 1px solid rgba(0, 85, 104, 0.2);
}

.scope-cta__title {
    margin-bottom: 0.75rem;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 800;
}

.scope-cta__text {
    max-width: 26rem;
    margin-bottom: 1.75rem;
    color: var(--sochicit-muted);
}

.scope-cta__cta .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
}


/* 6. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 359.98px) {
    .internal-hero__title {
        font-size: 2.25rem;
    }
}

/* En estos rangos el párrafo de Alcance parte en otra palabra y "país."
   termina antes; la línea sigue esa última línea. */
@media (min-width: 632px) and (max-width: 991.98px),
       (min-width: 1122px) and (max-width: 1282.98px) {
    .scope-cta__line {
        width: min(17.35em, 100%);
    }
}

@media (min-width: 1283px) and (max-width: 1386.98px) {
    .scope-cta__line {
        width: min(19.25em, 100%);
    }
}

@media (max-width: 575.98px) {
    .internal-hero__watermark {
        top: -10%;
        right: -9rem;
        width: 22rem;
    }

    .purpose-section__watermark {
        right: -9rem;
        width: 26rem;
    }

    .scope-cta__cta .btn {
        width: 100%;
    }
}

@media (min-width: 768px) {
    .institutional-pillars__list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 992px) {
    .editorial-section__grid {
        grid-template-columns: 55fr 45fr;
        align-items: start;
    }

    .scope-cta__grid {
        grid-template-columns: 60fr 40fr;
        align-items: start;
    }

    .scope-cta__cta {
        padding: 0 0 0 clamp(2rem, 4vw, 4rem);
        border-top: 0;
        border-left: 1px solid rgba(0, 85, 104, 0.2);
    }

    .purpose-section__watermark {
        right: -10rem;
        width: 52rem;
    }
}


/* ==========================================================================
   7. HISTORIA (línea de tiempo y cierre)
   Reutiliza .editorial-* y .purpose-section; solo agrega lo propio.
   ========================================================================== */
.editorial-section__grid--intro .editorial-text {
    margin-top: 0;
}

.editorial-text--pending {
    font-style: italic;
    color: var(--sochicit-muted);
}

.timeline-section {
    padding-block: clamp(4rem, 8vw, 7rem);
    background: var(--sochicit-light);
}

.timeline-section__header {
    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.timeline-section__accent {
    display: flex;
    gap: 0.5rem;
    width: 6rem;
    margin-top: 1.5rem;
}

.timeline-section__accent span {
    flex: 0 0 calc((100% - 0.5rem) / 2);
    height: 4px;
    border-radius: 2px;
}

.timeline-section__accent span:first-child {
    background: var(--sochicit-chile-blue);
}

.timeline-section__accent span:last-child {
    background: var(--sochicit-red);
}

.timeline {
    --timeline-gap: clamp(3rem, 5vw, 4.5rem);
    --timeline-title-size: clamp(1.5rem, 3vw, 2.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.timeline__item {
    position: relative;
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0 0 var(--timeline-gap) 2.25rem;
    list-style: none;
}

.timeline__item:last-child {
    padding-bottom: 0;
}

.timeline__marker {
    position: absolute;
    top: calc(var(--timeline-title-size) * 0.6 - 0.45rem);
    bottom: 0;
    left: 0;
    width: 0.9rem;
}

.timeline__marker::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: rgba(0, 85, 104, 0.3);
}

.timeline__item:last-child .timeline__marker::before {
    display: none;
}

.timeline__marker::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 0.9rem;
    height: 0.9rem;
    border: 3px solid var(--sochicit-light);
    border-radius: 50%;
    background: var(--sochicit-navy);
    outline: 1px solid var(--sochicit-petrol);
    transform: translateX(-50%);
}

.timeline__title {
    margin: 0;
    font-size: var(--timeline-title-size);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sochicit-navy);
}

.timeline__title::after {
    content: "";
    display: block;
    width: 2rem;
    height: 3px;
    margin-top: 0.6rem;
    background: var(--sochicit-identity-line);
}

.timeline__text {
    max-width: 30rem;
    margin: 0;
    font-size: 1.125rem;
    color: var(--sochicit-muted);
}

.closing-section {
    padding-block: clamp(3.5rem, 7vw, 6rem);
}

.closing-section .purpose-section__statement {
    margin-bottom: 1.25rem;
    font-size: clamp(2rem, 3.6vw, 3.5rem);
}

.closing-section__text {
    max-width: 34rem;
    margin: 0 0 1.75rem;
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.85);
}

.closing-section__link {
    display: inline-block;
    padding-block: 0.5rem;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--sochicit-white);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
}

.closing-section__link:hover {
    color: var(--sochicit-white);
    text-decoration-thickness: 2px;
}

.closing-section :focus-visible {
    outline-color: var(--sochicit-white);
}

@media (min-width: 768px) {
    .timeline__item {
        grid-template-columns: minmax(0, 5fr) 4.5rem minmax(0, 7fr);
        align-items: start;
        gap: 0;
        padding-left: 0;
    }

    .timeline__title {
        padding-right: 1.5rem;
        text-align: right;
    }

    .timeline__title::after {
        margin-left: auto;
    }

    .timeline__marker {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        width: auto;
        height: 100%;
        margin-top: calc(var(--timeline-title-size) * 0.6 - 0.45rem);
    }

    .timeline__marker::before {
        bottom: calc(-1 * var(--timeline-gap));
    }

    .timeline__text {
        padding: 0.55rem 0 0 1.5rem;
    }
}

@media (min-width: 992px) {
    .editorial-section__grid--intro {
        grid-template-columns: 4fr 6fr;
    }

    .editorial-section__grid--intro .editorial-text {
        margin-top: 2.1rem;
    }
}

/* ==========================================================================
   8. DIRECTORIO
   Reutiliza .editorial-* y la cabecera interna; agrega solo lo propio.
   ========================================================================== */
.directory-count {
    align-self: center;
}

.directory-count__figure {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(5rem, 11vw, 9.5rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: var(--sochicit-navy);
}

.directory-count__label {
    margin: 0.75rem 0 0;
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sochicit-petrol);
}

.directory-count__accent {
    display: flex;
    gap: 0.5rem;
    width: 5rem;
    margin-top: 1.25rem;
}

.directory-count__accent span {
    flex: 0 0 calc((100% - 0.5rem) / 2);
    height: 4px;
    border-radius: 2px;
}

.directory-count__accent span:first-child {
    background: var(--sochicit-chile-blue);
}

.directory-count__accent span:last-child {
    background: var(--sochicit-red);
}

.directory {
    padding-block: clamp(4rem, 8vw, 7rem);
    background: var(--sochicit-light);
}

.directory__header {
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.directory__header .section-label {
    margin: 0;
}

.directory__level {
    position: relative;
    display: grid;
    gap: 2.5rem clamp(1.5rem, 3vw, 3rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.directory__level + .directory__level {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-top: clamp(2.5rem, 5vw, 4rem);
    border-top: 1px solid var(--sochicit-border);
}

.directory__level + .directory__level::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    width: 2.5rem;
    height: 3px;
    background: var(--sochicit-chile-blue);
}

.member {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: 0 1.25rem;
    align-items: center;
    margin: 0;
    list-style: none;
}

/* Área reservada para la fotografía oficial (proporción 4:5). */
.member__photo {
    position: relative;
    container-type: inline-size;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius);
    background: var(--sochicit-ice);
}

.member__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../img/isotipo-sochicit-web.0ab697b258e6.png") no-repeat right -52% bottom -26% / 135%;
    opacity: 0.045;
    pointer-events: none;
}

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

.member__initial {
    position: absolute;
    z-index: 1;
    left: 11cqw;
    bottom: 7cqw;
    font-family: var(--font-heading);
    font-size: 32cqw;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--sochicit-petrol);
    opacity: 0.16;
    user-select: none;
}

.member__role {
    margin: 0 0 0.5rem;
    font-size: clamp(1.15rem, 1.7vw, 1.4rem);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sochicit-navy);
}

.member__pending {
    max-width: 20rem;
    margin: 0;
    font-size: 0.9375rem;
    color: var(--sochicit-muted);
}

.directory__level--second .member__role {
    font-size: clamp(1.3rem, 2vw, 1.75rem);
}

@media (min-width: 576px) {
    .directory__level--second .member__photo {
        max-width: 15rem;
    }

    .directory__level--third .member__photo {
        max-width: 12.5rem;
    }
}

.member--lead {
    grid-template-columns: 7rem 1fr;
}

.member--lead .member__role {
    font-size: clamp(1.6rem, 3.4vw, 3rem);
    line-height: 1.1;
}

.member--lead .member__pending {
    max-width: 26rem;
    font-size: 1.0625rem;
}

.directory-closing {
    padding-block: clamp(3rem, 6vw, 5rem);
    background: var(--sochicit-ice);
}

.directory-closing__text {
    max-width: 30rem;
    margin: 0 0 1.25rem;
    font-size: clamp(1.125rem, 1.5vw, 1.3rem);
    line-height: 1.7;
    color: var(--sochicit-graphite);
}

.directory-closing__link {
    display: inline-block;
    padding-block: 0.5rem;
    color: var(--sochicit-petrol);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
}

.directory-closing__link:hover {
    color: var(--sochicit-navy);
    text-decoration-thickness: 2px;
}

.directory-closing__links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

@media (min-width: 576px) {
    .directory__level--second,
    .directory__level--third {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .member {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        align-items: start;
    }

    .member--lead {
        grid-template-columns: minmax(9rem, 15rem) 1fr;
        gap: 1.5rem 2.5rem;
        align-items: center;
    }
}

@media (min-width: 992px) {
    .directory__level--second,
    .directory__level--third {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .member--lead {
        grid-template-columns: 20rem 1fr;
        gap: 1.5rem 4rem;
    }
}

.member__info {
    min-width: 0;
}

.member__role {
    overflow-wrap: anywhere;
}

@media (max-width: 419.98px) {
    .member {
        grid-template-columns: 4.5rem minmax(0, 1fr);
        gap: 0 1rem;
    }

    .member--lead {
        grid-template-columns: 6rem minmax(0, 1fr);
    }

    .member__role,
    .directory__level--second .member__role {
        font-size: 1.0625rem;
        letter-spacing: 0.02em;
    }

    .member--lead .member__role {
        font-size: 1.25rem;
    }
}

/* ==========================================================================
   9. ESTATUTOS
   Reutiliza .editorial-*, .purpose-section*, .institutional-pillar* y
   .directory-closing*; agrega solo lo propio de esta página.
   ========================================================================== */
.fact-list {
    display: grid;
    gap: 1.5rem;
    margin: 0 0 1.5rem;
    padding: 0;
}

.fact-list__item {
    padding-top: 1.25rem;
    border-top: 1px solid var(--sochicit-border);
}

.fact-list__item .section-label {
    margin-bottom: 0.4rem;
}

.fact-list__value {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
    font-weight: 800;
    color: var(--sochicit-navy);
}

.fact-list__note {
    max-width: 24rem;
    margin: 0;
    font-size: 0.9375rem;
    color: var(--sochicit-muted);
}

.editorial-text--intro {
    margin-top: 1rem;
    max-width: 38rem;
}

.concept-list {
    display: grid;
    gap: 2.5rem;
    margin: clamp(2.5rem, 5vw, 4rem) 0 0;
    padding: 0;
    list-style: none;
}

.concept-list__item {
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    list-style: none;
}

.concept-list__number {
    display: block;
    margin-bottom: 1rem;
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 800;
    color: rgba(255, 255, 255, 0.4);
}

.concept-list__title {
    margin: 0 0 0.5rem;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--sochicit-white);
}

.concept-list__text {
    max-width: 22rem;
    margin: 0;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.75);
}

.member-categories {
    display: grid;
    gap: 0;
    margin: clamp(2rem, 4vw, 3rem) 0 1.5rem;
    padding: 0;
    list-style: none;
}

.member-categories__item {
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    padding-block: 1.5rem;
    border-top: 1px solid var(--sochicit-border);
    list-style: none;
}

.member-categories__item:last-child {
    border-bottom: 1px solid var(--sochicit-border);
}

.member-categories__number {
    flex: none;
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 800;
    color: var(--sochicit-petrol);
    opacity: 0.55;
}

.member-categories__title {
    margin: 0;
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 800;
    color: var(--sochicit-navy);
}

.member-categories__note {
    max-width: 36rem;
    margin: 0;
    font-size: 0.9375rem;
    color: var(--sochicit-muted);
}

.org-section {
    padding-block: clamp(4rem, 8vw, 7rem);
    background: var(--sochicit-light);
}

.org-section__header {
    max-width: 40rem;
}

/* Jerarquía centrada: Asamblea General → Directorio → organismos,
   unidos por una línea fina con un pequeño acento azul en cada tramo. */
.org-chart--centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: clamp(30rem, 66vw, 54rem);
    margin: clamp(2.75rem, 5.5vw, 4.5rem) auto clamp(2.25rem, 4.5vw, 3.5rem);
    text-align: center;
}

.org-chart__connector {
    display: block;
    width: 1px;
    height: clamp(2rem, 4vw, 2.75rem);
    background: linear-gradient(to bottom, var(--sochicit-border) 0 70%, var(--sochicit-chile-blue) 70% 100%);
}

.org-chart__level {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.org-node {
    max-width: 30rem;
}

.org-node--secondary {
    max-width: 34rem;
}

.org-node__title {
    margin: 0 0 0.5rem;
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 800;
    color: var(--sochicit-navy);
}

.org-node--principal .org-node__title {
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
}

.org-node__text {
    margin: 0;
    color: var(--sochicit-muted);
}

.org-node__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 0.75rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}

.org-node__list li {
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--sochicit-border);
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--sochicit-graphite);
    background: var(--sochicit-white);
}

.org-chart__level--bodies {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.75rem, 3.5vw, 2.5rem);
    width: 100%;
}

.org-chart__level--bodies .org-node {
    max-width: none;
}

.org-section__link {
    display: block;
    max-width: clamp(30rem, 66vw, 54rem);
    margin: 0 auto;
    padding-block: 0.5rem;
    text-align: center;
}

.functioning-list {
    margin-top: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 640px) {
    .org-chart__level--bodies {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 576px) {
    .fact-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .concept-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .functioning-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ==========================================================================
   10. CONGRESOS
   Cada evento es una franja editorial independiente. En móvil sigue el
   orden del DOM (Clasificación, Fecha, Título, Descripción, Lugar/Sede/
   Organiza/Horario, Enlace); en tablet pasa a 2 columnas y desde 1200px
   a 3 columnas (Fecha | Evento | Información) vía grid-template-areas.
   ========================================================================== */
.congress-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.congress-item {
    position: relative;
    display: grid;
    gap: 1rem;
    padding-block: clamp(2.75rem, 5vw, 4rem);
    border-top: 1px solid var(--sochicit-border);
    list-style: none;
}

.congress-list li:last-child {
    border-bottom: 1px solid var(--sochicit-border);
}

/* Pequeño acento de identidad sobre la línea, al comienzo de cada evento.
   Medidas fijas en px (no rem/%/fr/clamp) para que los dos segmentos
   midan siempre exactamente lo mismo, sin depender del ancho de ningún
   contenedor ni del viewport. */
.congress-item__accent {
    position: absolute;
    top: -1px;
    left: 0;
    display: flex;
    width: 36px;
    height: 2px;
    flex: 0 0 36px;
}

.congress-item__accent span {
    display: block;
    width: 18px;
    min-width: 18px;
    max-width: 18px;
    height: 2px;
    flex: 0 0 18px;
}

.congress-item__accent span:first-child {
    background: var(--sochicit-chile-blue);
}

.congress-item__accent span:last-child {
    background: var(--sochicit-red);
}

.congress-item__classification {
    margin: 0;
}

.congress-item__date {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.congress-item__daterange {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.4vw, 2.75rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--sochicit-navy);
}

.congress-item__monthyear {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
}

.congress-item__month {
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sochicit-petrol);
}

.congress-item__year {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--sochicit-muted);
}

.congress-item__year::before {
    content: "·";
    margin-right: 0.3rem;
    color: var(--sochicit-muted);
}

.congress-item__title {
    max-width: 34rem;
    margin: 0.25rem 0 0;
    font-size: clamp(1.4rem, 2.3vw, 1.9rem);
    font-weight: 800;
    line-height: 1.25;
}

.congress-item__text {
    max-width: 34rem;
    margin: 1rem 0 0;
    line-height: 1.7;
    color: var(--sochicit-muted);
}

.congress-item__meta {
    display: grid;
    gap: 1rem;
    margin: 0;
}

.congress-item__meta div {
    display: grid;
    gap: 0.2rem;
}

.congress-item__meta dt {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sochicit-petrol);
}

.congress-item__meta dd {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--sochicit-graphite);
}

.congress-item__link {
    display: inline-block;
    padding-block: 0.25rem;
}

.congress-closing__text {
    max-width: 34rem;
    margin: 0;
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .congress-item {
        grid-template-columns: minmax(8rem, 11rem) 1fr;
        grid-template-areas:
            "date   class"
            "date   title"
            "date   text"
            "date   meta"
            "date   link";
        column-gap: clamp(2rem, 4vw, 3rem);
        row-gap: 0.5rem;
        align-items: start;
    }

    .congress-item__classification { grid-area: class; }
    .congress-item__date { grid-area: date; }
    .congress-item__title { grid-area: title; }
    .congress-item__text { grid-area: text; }
    .congress-item__meta {
        grid-area: meta;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 0.5rem;
    }
    .congress-item__link { grid-area: link; margin-top: 0.5rem; }
}

@media (min-width: 1200px) {
    .congress-item {
        grid-template-columns: 19fr 54fr 27fr;
        grid-template-areas:
            "date   class   meta"
            "date   title   meta"
            "date   text    link";
        column-gap: clamp(2.5rem, 4vw, 4rem);
        row-gap: 0.75rem;
        align-items: start;
    }

    .congress-item__classification { grid-area: class; }
    .congress-item__date { grid-area: date; }
    .congress-item__title { grid-area: title; margin-top: 0; }
    .congress-item__text { grid-area: text; }
    .congress-item__meta { grid-area: meta; }
    .congress-item__link { grid-area: link; }
}

/* ==========================================================================
   11. RECURSOS
   Composición editorial de tres áreas; reutiliza .editorial-*,
   .empty-state y .directory-closing*.
   ========================================================================== */
.resource-areas {
    display: grid;
    gap: 2.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.resource-area {
    padding-top: 1.75rem;
    border-top: 1px solid var(--sochicit-border);
    list-style: none;
}

.resource-area__number {
    display: block;
    margin-bottom: 1rem;
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 800;
    color: var(--sochicit-petrol);
    opacity: 0.4;
}

.resource-area__title {
    margin: 0 0 0.75rem;
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    font-weight: 800;
    color: var(--sochicit-navy);
}

.resource-area__text {
    max-width: 26rem;
    margin: 0;
    color: var(--sochicit-muted);
}

@media (min-width: 768px) {
    .resource-areas {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2.5rem clamp(2rem, 4vw, 3.5rem);
    }
}

/* ==========================================================================
   12. NOTICIAS
   Contenedor del futuro listado (reutiliza .empty-state mientras no hay
   contenido real) y arquitectura del componente "news-card" preparada
   para cuando las noticias provengan de Django. No se usa todavía.
   ========================================================================== */
.news-grid {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
}

.news-card {
    display: grid;
    gap: 1rem;
}

.news-card__image {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius);
}

.news-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem;
}

.news-card__category {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sochicit-petrol);
}

.news-card__date {
    font-size: 0.875rem;
    color: var(--sochicit-muted);
}

.news-card__title {
    margin: 0;
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 800;
    color: var(--sochicit-navy);
}

.news-card__excerpt {
    margin: 0;
    color: var(--sochicit-muted);
}

.news-card__link {
    display: inline-block;
    padding-block: 0.25rem;
}

@media (min-width: 768px) {
    .news-grid--populated {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2.5rem clamp(2rem, 4vw, 3rem);
    }
}

/* ==========================================================================
   13. AGENDA
   Listado compacto y cronológico (más bajo que .congress-item): en móvil
   sigue el orden del DOM (Tipo, Fecha, Título, Lugar, Enlace); desde
   768px se reorganiza en 4 columnas (Fecha | Actividad | Lugar | Tipo/
   Acción) vía grid-template-areas.
   ========================================================================== */
.agenda-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.agenda-row {
    display: grid;
    gap: 0.4rem;
    padding-block: clamp(1.25rem, 2.5vw, 1.75rem);
    border-top: 1px solid var(--sochicit-border);
    list-style: none;
}

.agenda-list li:last-child {
    border-bottom: 1px solid var(--sochicit-border);
}

.agenda-row__type {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sochicit-petrol);
}

.agenda-row__date {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    font-weight: 800;
    color: var(--sochicit-navy);
}

.agenda-row__year {
    display: block;
    margin-top: 0.1rem;
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--sochicit-muted);
}

.agenda-row__title {
    margin: 0;
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    font-weight: 800;
    line-height: 1.3;
    color: var(--sochicit-navy);
}

.agenda-row__place {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--sochicit-muted);
}

.agenda-row__link {
    display: inline-block;
    font-size: 0.9375rem;
    color: var(--sochicit-petrol);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
}

.agenda-row__link:hover {
    color: var(--sochicit-navy);
    text-decoration-thickness: 2px;
}

.agenda-note {
    padding-block: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid var(--sochicit-border);
}

.agenda-note__text {
    margin: 0;
    max-width: 40rem;
    color: var(--sochicit-muted);
}

@media (min-width: 768px) {
    .agenda-row {
        grid-template-columns: 7rem 1fr 10rem 9rem;
        grid-template-areas:
            "date   title   place   type"
            "date   title   place   link";
        column-gap: clamp(1.5rem, 3vw, 2.5rem);
        row-gap: 0.35rem;
        align-items: start;
    }

    .agenda-row__type { grid-area: type; align-self: end; }
    .agenda-row__date { grid-area: date; }
    .agenda-row__title { grid-area: title; }
    .agenda-row__place { grid-area: place; }
    .agenda-row__link { grid-area: link; align-self: start; }
}

/* ==========================================================================
   14. CURSOS
   Listado dentro de la columna derecha de .editorial-section__grid--intro
   (más angosta que el container-wide de Congresos), por eso se mantiene
   apilado en todos los anchos en vez de reflow a 3 columnas. Reutiliza
   .congress-item__accent y .congress-item__date* para el bloque de fecha.
   ========================================================================== */
.course-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.course-item {
    position: relative;
    padding-block: clamp(2rem, 4vw, 2.75rem);
    border-top: 1px solid var(--sochicit-border);
    list-style: none;
}

.course-list li:last-child {
    border-bottom: 1px solid var(--sochicit-border);
}

.course-item__classification {
    margin: 0;
}

.course-item__title {
    max-width: 34rem;
    margin: 0.75rem 0 0;
    font-size: clamp(1.3rem, 2.1vw, 1.7rem);
    font-weight: 800;
    line-height: 1.3;
}

.course-item__text {
    max-width: 34rem;
    margin: 1rem 0 0;
    line-height: 1.7;
    color: var(--sochicit-muted);
}

.course-item__meta {
    display: grid;
    gap: 1rem;
    margin: 1.25rem 0 0;
}

.course-item__meta div {
    display: grid;
    gap: 0.2rem;
}

.course-item__meta dt {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sochicit-petrol);
}

.course-item__meta dd {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--sochicit-graphite);
}

.course-item__link {
    display: inline-block;
    margin-top: 1.25rem;
    padding-block: 0.25rem;
}

@media (min-width: 480px) {
    .course-item__meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ==========================================================================
   15. NOTICIAS — LISTADO Y DETALLE
   Listado editorial en filas (no cards, no imágenes) dentro de la columna
   derecha de .editorial-section__grid--intro; reutiliza
   .congress-item__accent para el acento de identidad. El detalle
   reutiliza las clases .internal-hero* del header institucional.
   ========================================================================== */
.news-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.news-item {
    position: relative;
    padding-block: clamp(2rem, 4vw, 2.75rem);
    border-top: 1px solid var(--sochicit-border);
    list-style: none;
}

.news-list li:last-child {
    border-bottom: 1px solid var(--sochicit-border);
}

.news-item__date {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--sochicit-petrol);
}

.news-item__title {
    max-width: 34rem;
    margin: 0.75rem 0 0;
    font-size: clamp(1.3rem, 2.1vw, 1.7rem);
    font-weight: 800;
    line-height: 1.3;
}

.news-item__excerpt {
    max-width: 34rem;
    margin: 1rem 0 0;
    line-height: 1.7;
    color: var(--sochicit-muted);
}

.news-item__link {
    display: inline-block;
    margin-top: 1.25rem;
    padding-block: 0.25rem;
}

/* Detalle de noticia */
.noticia-hero__fecha {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--sochicit-muted);
}

.noticia-detalle {
    max-width: 42rem;
}

.noticia-detalle__extracto {
    margin: 0 0 2rem;
    font-size: clamp(1.15rem, 1.8vw, 1.4rem);
    font-weight: 500;
    line-height: 1.6;
    color: var(--sochicit-navy);
}

.noticia-detalle__contenido p {
    margin: 0 0 1.25rem;
    line-height: 1.8;
    color: var(--sochicit-graphite);
}

.noticia-detalle__contenido p:last-child {
    margin-bottom: 0;
}

.noticia-detalle__autor {
    margin: 2rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--sochicit-border);
    font-size: 0.9375rem;
    color: var(--sochicit-muted);
}

.noticia-detalle__back {
    display: inline-block;
    margin-top: 2rem;
    color: var(--sochicit-petrol);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
}

.noticia-detalle__back:hover {
    color: var(--sochicit-navy);
    text-decoration-thickness: 2px;
}

/* Acento editorial exclusivo del detalle de noticia. No toca
   .internal-hero__accent (usado por el resto de páginas interiores):
   solo agrega este modificador. Ancho total (90px) ajustado para
   coincidir visualmente con el ancho del texto de fecha ("27 SEP 2026")
   que aparece debajo. Ancho fijo en px (no %, no depende del
   contenedor) para que azul y rojo midan siempre exactamente lo mismo. */
.internal-hero__accent--noticia {
    width: 90px;
    gap: 0;
}

.internal-hero__accent--noticia span {
    flex: 0 0 45px;
    width: 45px;
    min-width: 45px;
    max-width: 45px;
}

/* ==========================================================================
   16. SOCIOS
   Reutiliza .editorial-*, .resource-areas, .purpose-section/.concept-list
   y .directory-closing*; agrega solo la nota del CTA.
   ========================================================================== */
.socios-cta__note {
    margin: 1rem 0 0;
    max-width: 28rem;
    font-size: 0.875rem;
    color: var(--sochicit-muted);
}

/* ==========================================================================
   17. POSTULACIÓN A SOCIOS
   Secuencia de etapas + formulario visual/no persistente. Reutiliza
   .editorial-*; agrega solo lo propio de esta página. Los controles de
   Bootstrap (.form-control, .form-select, .form-check) se reestilizan
   dentro de .socios-form para seguir el sistema visual de SOCHICIT en
   vez de la apariencia por defecto de Bootstrap.
   ========================================================================== */
.process-stages {
    display: flex;
    flex-direction: column;
    margin: clamp(2rem, 4vw, 3rem) 0 0;
    padding: 0;
    list-style: none;
}

.process-stage {
    padding-block: 1.25rem;
    border-top: 1px solid var(--sochicit-border);
    list-style: none;
}

.process-stages li:last-child {
    border-bottom: 1px solid var(--sochicit-border);
}

.process-stage__number {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--sochicit-petrol);
}

.process-stage__label {
    margin: 0.4rem 0 0;
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--sochicit-navy);
}

@media (min-width: 768px) {
    .process-stages {
        flex-direction: row;
    }

    .process-stage {
        flex: 1 1 0;
        padding: 0 1.5rem;
        border-top: none;
        border-left: 1px solid var(--sochicit-border);
    }

    .process-stage:first-child {
        padding-left: 0;
        border-left: none;
    }

    .process-stages li:last-child {
        border-bottom: none;
    }
}

.socios-form-section {
    padding-block: clamp(2rem, 4vw, 2.75rem);
    border-top: 1px solid var(--sochicit-border);
}

.socios-form-section:first-of-type {
    border-top: none;
    padding-top: 0;
}

.socios-form-section__title {
    margin: 0 0 1.5rem;
    font-size: clamp(1.3rem, 2.1vw, 1.6rem);
    font-weight: 800;
    color: var(--sochicit-navy);
}

.socios-form-section__intro {
    max-width: 40rem;
    margin: -0.75rem 0 1.5rem;
    color: var(--sochicit-muted);
}

.socios-form .form-label {
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sochicit-petrol);
    margin-bottom: 0.5rem;
}

.socios-form .form-control,
.socios-form .form-select {
    border: 1px solid var(--sochicit-border);
    border-radius: 0.5rem;
    padding: 0.65rem 0.9rem;
    font-size: 1rem;
    color: var(--sochicit-graphite);
    background-color: var(--sochicit-white);
}

.socios-form .form-control:focus,
.socios-form .form-select:focus {
    border-color: var(--sochicit-chile-blue);
    box-shadow: none;
}

.socios-form textarea.form-control {
    min-height: 7rem;
    resize: vertical;
}

.socios-form .form-check {
    margin-bottom: 0.75rem;
    padding-left: 1.75rem;
}

.socios-form .form-check-input {
    width: 1.15em;
    height: 1.15em;
    margin-left: -1.75rem;
    border: 1px solid var(--sochicit-border);
}

.socios-form .form-check-input:checked {
    background-color: var(--sochicit-navy);
    border-color: var(--sochicit-navy);
}

.socios-form .form-check-input:focus {
    box-shadow: none;
}

.socios-form .form-check-label {
    color: var(--sochicit-graphite);
}

.socios-form__hint {
    margin: 0.75rem 0 0;
    font-size: 0.875rem;
    color: var(--sochicit-muted);
}

.socios-form__submit {
    padding-top: 2rem;
    border-top: 1px solid var(--sochicit-border);
}

.acciones-respuesta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.acciones-respuesta form {
    margin: 0;
}

.socios-form__status {
    margin: 0 0 1.25rem;
    max-width: 32rem;
    font-size: 0.9375rem;
    font-style: italic;
    color: var(--sochicit-muted);
}

.socios-form__confirm-note {
    margin: 1rem 0 0;
    max-width: 32rem;
    font-size: 0.9375rem;
    color: var(--sochicit-muted);
}

.socios-form__required-note {
    margin: 0 0 2.5rem;
    font-size: 0.875rem;
    color: var(--sochicit-muted);
}

.socios-form .required-mark {
    margin-left: 0.2rem;
    color: var(--sochicit-red);
}

.socios-form select.form-select:disabled,
.socios-form .form-control:disabled {
    background-color: var(--sochicit-light);
    color: var(--sochicit-muted);
}

.socios-form .form-control.is-invalid,
.socios-form .form-select.is-invalid {
    border-color: var(--sochicit-red);
}

.socios-form__error {
    margin: 0.35rem 0 0;
    font-size: 0.875rem;
    color: var(--sochicit-red);
}

.socios-form__error-summary {
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--sochicit-red);
    border-radius: 0.5rem;
    background: var(--sochicit-light);
}

.socios-form__error-summary .socios-form__error {
    margin: 0;
}

.socios-form__error-summary .socios-form__error + .socios-form__error {
    margin-top: 0.35rem;
}

.requisitos-vacio {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    max-width: 34rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--sochicit-border);
    border-radius: 0.5rem;
    background: var(--sochicit-light);
}

.requisitos-vacio[hidden] {
    display: none;
}

.requisitos-vacio__accent {
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    margin-top: 0.3rem;
    border-radius: 50%;
    background: linear-gradient(90deg, var(--sochicit-chile-blue) 0 50%, var(--sochicit-red) 50% 100%);
}

.requisitos-vacio__text {
    margin: 0;
    color: var(--sochicit-muted);
}

.requisitos-lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.requisito-item {
    padding-block: 1.1rem;
    border-top: 1px solid var(--sochicit-border);
    list-style: none;
}

.requisitos-lista .requisito-item:first-child {
    border-top: none;
    padding-top: 0;
}

.requisito-item__check {
    display: flex;
    align-items: flex-start;
    padding-left: 1.75rem;
}

.requisito-item__check .form-check-input {
    margin-left: -1.75rem;
    margin-top: 0.2rem;
}

.requisito-item__letra {
    display: inline-block;
    margin-right: 0.6rem;
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--sochicit-navy);
}

.requisito-obligatorio {
    display: inline-block;
    margin-left: 0.4rem;
    font-family: var(--font-heading);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sochicit-petrol);
}

.requisito-item__nota {
    margin: 0.75rem 0 0 1.75rem;
    font-size: 0.875rem;
    color: var(--sochicit-muted);
}

.requisitos-contador {
    margin: 1.25rem 0 0;
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--sochicit-petrol);
}

.patrocinador-sugerencias {
    position: relative;
    z-index: 5;
    margin: 0.25rem 0 0;
    padding: 0.25rem 0;
    list-style: none;
    border: 1px solid var(--sochicit-border);
    border-radius: 0.5rem;
    background: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    max-height: 12rem;
    overflow-y: auto;
}

.patrocinador-sugerencias[hidden] {
    display: none;
}

.patrocinador-estado {
    margin: 0.4rem 0 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--sochicit-petrol);
}

.patrocinador-estado[hidden] {
    display: none;
}

.patrocinador-sugerencias li {
    padding: 0.5rem 0.9rem;
    cursor: pointer;
    font-size: 0.9375rem;
    color: var(--sochicit-graphite);
}

.patrocinador-sugerencias li:hover,
.patrocinador-sugerencias li:focus {
    background: var(--sochicit-light);
    outline: none;
}


/* 20. ESTATUTOS — lectura del texto íntegro (índice + acordeón)
   -------------------------------------------------------------------------- */
.estatutos-indice {
    padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(3rem, 6vw, 5rem);
    background: var(--sochicit-light);
}

.estatutos-indice__inner {
    display: grid;
    gap: 2rem clamp(3rem, 6vw, 6rem);
}

.estatutos-indice__lista {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.estatutos-indice__lista li {
    border-top: 1px solid var(--sochicit-border);
}

.estatutos-indice__enlace {
    display: flex;
    gap: 0.75rem;
    padding-block: 0.8rem;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--sochicit-navy);
    text-decoration: none;
}

.estatutos-indice__enlace:hover {
    color: var(--sochicit-petrol);
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.estatutos-indice__numeral {
    flex: 0 0 2.25rem;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--sochicit-petrol);
}

.estatutos-texto {
    padding-block: clamp(3rem, 6vw, 5.5rem);
    background: var(--sochicit-white);
}

.estatutos-acordeon {
    --bs-accordion-border-color: var(--sochicit-border);
    --bs-accordion-border-radius: 0.75rem;
    --bs-accordion-inner-border-radius: calc(0.75rem - 1px);
    --bs-accordion-btn-color: var(--sochicit-navy);
    --bs-accordion-btn-padding-y: 1.15rem;
    --bs-accordion-btn-padding-x: 1.25rem;
    --bs-accordion-active-color: var(--sochicit-navy);
    --bs-accordion-active-bg: var(--sochicit-ice);
    --bs-accordion-btn-focus-box-shadow: none;
    max-width: 56rem;
    margin-inline: auto;
}

.estatutos-acordeon .accordion-item {
    margin-bottom: 0.75rem;
    border-radius: var(--bs-accordion-border-radius);
    overflow: hidden;
    scroll-margin-top: 6rem;
}

.estatutos-acordeon .accordion-button {
    gap: 1rem;
    align-items: baseline;
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.35;
}

.estatutos-acordeon__titulo-numero {
    flex: 0 0 auto;
    min-width: 4.75rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sochicit-petrol);
}

.estatutos-lectura {
    padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 4vw, 2.5rem) clamp(1.5rem, 3vw, 2.25rem);
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--sochicit-graphite);
}

.estatutos-lectura p {
    max-width: 44rem;
    margin: 0 0 1rem;
}

.estatutos-articulo + .estatutos-articulo {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--sochicit-border);
}

.estatutos-articulo__nombre {
    margin: 0 0 0.75rem;
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--sochicit-navy);
}

.estatutos-lista {
    max-width: 44rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.estatutos-lista > li {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.estatutos-lista__marca {
    flex: 0 0 2rem;
    font-weight: 600;
    color: var(--sochicit-petrol);
}

.estatutos-lista__texto {
    flex: 1 1 auto;
    min-width: 0;
}

.estatutos-lista--sub {
    margin: 0.5rem 0 0.25rem;
}

@media (min-width: 768px) {
    .estatutos-indice__inner {
        grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);
        column-gap: clamp(2rem, 4vw, 3rem);
        align-items: start;
    }

    .estatutos-acordeon .accordion-button {
        font-size: 1.125rem;
    }
}


/* ==========================================================================
   21. SOCHICIT GESTIÓN — navegación privada y «Mi membresía»
   Reutiliza las variables de sochicit.css. Sin animaciones (zona privada).
   ========================================================================== */
.gestion-nav {
    background: var(--sochicit-white);
    border-bottom: 1px solid var(--sochicit-border);
}

.gestion-nav__lista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 clamp(1rem, 2.5vw, 2rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.gestion-nav__lista form {
    margin: 0;
}

.gestion-nav__enlace {
    display: inline-block;
    padding: 0.9rem 0.15rem;
    border: 0;
    border-bottom: 3px solid transparent;
    background: none;
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--sochicit-navy);
    text-decoration: none;
    cursor: pointer;
}

.gestion-nav__enlace:hover {
    color: var(--sochicit-petrol);
    border-bottom-color: var(--sochicit-border);
}

.gestion-nav__enlace[aria-current="page"] {
    border-bottom-color: var(--sochicit-petrol);
    color: var(--sochicit-petrol);
}

.gestion-nav__enlace:focus-visible {
    outline: 3px solid var(--sochicit-blue);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

@media (min-width: 768px) {
    .gestion-nav__salir {
        margin-left: auto;
    }
}

/* Datos institucionales */
.membresia-datos {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 clamp(1.5rem, 4vw, 3rem);
    margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
}

.membresia-datos__item {
    padding-block: 1.1rem;
    border-top: 1px solid var(--sochicit-border);
}

.membresia-datos dt {
    margin-bottom: 0.3rem;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sochicit-petrol);
}

.membresia-datos dd {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    font-weight: 700;
    color: var(--sochicit-navy);
}

@media (min-width: 768px) {
    .membresia-datos {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1100px) {
    .membresia-datos {
        grid-template-columns: repeat(3, 1fr);
    }
}

.membresia-nota {
    max-width: 46rem;
    margin: 1.5rem 0 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--sochicit-muted);
}

/* Historial anual */
.membresia-historial {
    width: 100%;
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    border-collapse: collapse;
}

.membresia-historial thead th {
    padding: 0.75rem 1rem;
    border-bottom: 2px solid var(--sochicit-navy);
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-align: left;
    text-transform: uppercase;
    color: var(--sochicit-petrol);
}

.membresia-historial tbody th,
.membresia-historial tbody td {
    padding: 1rem;
    border-bottom: 1px solid var(--sochicit-border);
    vertical-align: top;
    text-align: left;
    font-size: 0.975rem;
    line-height: 1.5;
    color: var(--sochicit-graphite);
}

.membresia-historial tbody th {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--sochicit-navy);
}

.membresia-monto {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--sochicit-navy);
}

.membresia-rotulo,
.membresia-vacio {
    font-size: 0.85rem;
    color: var(--sochicit-muted);
}

/* Estados: se distinguen por texto, forma y color; «Sin información» es
   deliberadamente neutro (no sugiere deuda). */
.estado-anualidad {
    display: inline-block;
    padding: 0.2rem 0.75rem;
    border: 1px solid var(--sochicit-border);
    border-radius: 999px;
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

.estado-anualidad--pagada {
    background: var(--sochicit-petrol);
    border-color: var(--sochicit-petrol);
    color: var(--sochicit-white);
}

.estado-anualidad--pago_informado {
    background: var(--sochicit-ice);
    border-color: var(--sochicit-blue);
    color: var(--sochicit-navy);
}

.estado-anualidad--pendiente {
    background: #FFF4E0;
    border-color: #C98A00;
    color: #6B4100;
}

.estado-anualidad--sin_informacion {
    background: var(--sochicit-light);
    border: 1px dashed #8896A2;
    color: var(--sochicit-muted);
}

.estado-anualidad--exenta {
    background: var(--sochicit-white);
    border-color: var(--sochicit-petrol);
    color: var(--sochicit-petrol);
}

.estado-anualidad--no_corresponde {
    background: transparent;
    border-color: var(--sochicit-border);
    color: var(--sochicit-muted);
}

.membresia-aviso {
    display: block;
    margin-top: 0.6rem;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--sochicit-blue);
    border-radius: 0.25rem;
    background: var(--sochicit-ice);
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--sochicit-navy);
}

.membresia-leyenda {
    margin-top: clamp(2rem, 4vw, 3rem);
    padding-top: 1.5rem;
    border-top: 1px solid var(--sochicit-border);
    max-width: 52rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--sochicit-muted);
}

.membresia-leyenda__titulo {
    margin-bottom: 0.75rem;
    font-size: 1.05rem;
    color: var(--sochicit-navy);
}

.membresia-leyenda ul {
    padding-left: 1.2rem;
}

/* Teléfono: cada año es una tarjeta con sus datos rotulados. */
@media (max-width: 767.98px) {
    .membresia-historial,
    .membresia-historial tbody,
    .membresia-historial tr,
    .membresia-historial th,
    .membresia-historial td {
        display: block;
    }

    .membresia-historial thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .membresia-historial tbody tr {
        margin-bottom: 1rem;
        padding: 0.25rem 0;
        border: 1px solid var(--sochicit-border);
        border-radius: var(--radius);
        background: var(--sochicit-white);
    }

    .membresia-historial tbody th,
    .membresia-historial tbody td {
        display: grid;
        grid-template-columns: 7.5rem 1fr;
        gap: 0.75rem;
        padding: 0.6rem 1rem;
        border-bottom: 0;
    }

    .membresia-historial td > .estado-anualidad {
        justify-self: start;
    }

    .membresia-historial tbody th::before,
    .membresia-historial tbody td::before {
        content: attr(data-label);
        font-family: var(--font-heading);
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--sochicit-petrol);
    }
}


/* ==========================================================================
   22. SOCHICIT GESTIÓN — inicio compacto («Mi membresía» como pantalla de
   entrada). Cabecera y secciones de poca altura: la información útil queda
   cerca del inicio. Sin animaciones (zona privada).
   ========================================================================== */
.gestion-cabecera {
    padding-block: clamp(1.25rem, 2.5vw, 2rem);
    background: var(--sochicit-light);
    border-bottom: 1px solid var(--sochicit-border);
}

.gestion-cabecera__marca {
    margin: 0 0 0.35rem;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sochicit-petrol);
}

.gestion-cabecera__titulo {
    margin: 0;
    font-size: clamp(1.75rem, 3.6vw, 2.5rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--sochicit-navy);
}

.gestion-cabecera__nombre {
    margin: 0.35rem 0 0;
    font-family: var(--font-heading);
    font-size: clamp(1.05rem, 1.8vw, 1.3rem);
    font-weight: 600;
    color: var(--sochicit-graphite);
}

.gestion-cabecera__acento {
    display: flex;
    gap: 0.4rem;
    width: 5rem;
    margin-top: 0.8rem;
}

.gestion-cabecera__acento span {
    flex: 1;
    height: 3px;
    border-radius: 2px;
}

.gestion-cabecera__acento span:first-child {
    background: var(--sochicit-chile-blue);
}

.gestion-cabecera__acento span:last-child {
    background: var(--sochicit-red);
}

.gestion-seccion {
    padding-block: clamp(1.5rem, 3vw, 2.25rem);
    background: var(--sochicit-white);
}

.gestion-seccion--tinte {
    background: var(--sochicit-light);
}

.gestion-titulo {
    margin: 0 0 0.9rem;
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--sochicit-navy);
}

.gestion-subtitulo {
    margin: 0 0 0.6rem;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--sochicit-petrol);
}

.gestion-columnas {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem clamp(1.5rem, 4vw, 3rem);
}

@media (min-width: 768px) {
    .gestion-columnas {
        grid-template-columns: repeat(2, 1fr);
    }
}

.gestion-lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.gestion-lista li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    padding-block: 0.7rem;
    border-top: 1px solid var(--sochicit-border);
}

.gestion-lista li:last-child {
    border-bottom: 1px solid var(--sochicit-border);
}

.gestion-lista__texto {
    font-weight: 600;
    color: var(--sochicit-navy);
}

.gestion-vacio,
.gestion-enlace {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--sochicit-muted);
}

/* Datos institucionales: compactos, en una o dos filas. */
.membresia-datos {
    grid-template-columns: repeat(2, 1fr);
    gap: 0 1.25rem;
    margin-top: 0.5rem;
}

.membresia-datos__item {
    padding-block: 0.8rem;
}

.membresia-datos__item--ancho {
    grid-column: 1 / -1;
}

@media (min-width: 900px) {
    .membresia-datos {
        grid-template-columns: repeat(4, 1fr);
    }
}

.gestion-seccion .membresia-nota {
    margin-top: 0.75rem;
    font-size: 0.9rem;
}

.gestion-seccion .membresia-historial {
    margin-top: 0.75rem;
}

/* La leyenda del historial es un desplegable: no ocupa espacio hasta que se necesita. */
details.membresia-leyenda {
    margin-top: 1.25rem;
    padding-top: 0.9rem;
}

details.membresia-leyenda summary {
    cursor: pointer;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--sochicit-navy);
}

details.membresia-leyenda summary:focus-visible {
    outline: 3px solid var(--sochicit-blue);
    outline-offset: 3px;
    border-radius: 0.25rem;
}

details.membresia-leyenda ul {
    margin-top: 0.75rem;
}

/* B2: pagos de cada anualidad, saldo y acción «Pagar cuota» (deshabilitada). */
.estado-anualidad--parcialmente_pagada {
    background: var(--sochicit-ice);
    border-color: var(--sochicit-petrol);
    color: var(--sochicit-petrol);
}

.membresia-pagos {
    margin: 0;
    padding: 0;
    list-style: none;
}

.membresia-pago + .membresia-pago {
    margin-top: 0.5rem;
}

.membresia-pago__meta {
    display: block;
    font-size: 0.85rem;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .membresia-pago__meta {
        display: inline;
        white-space: normal;
    }
}

.membresia-accion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-top: 0.75rem;
}

.membresia-accion .btn[disabled] {
    cursor: not-allowed;
    opacity: 0.75;
}

.membresia-proximamente {
    padding: 0.15rem 0.6rem;
    border: 1px dashed #8896A2;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sochicit-muted);
}


/* B3.1: listado de socios y consulta financiera de Tesorería (solo lectura). */
.tesoreria-filtros {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem 1rem;
    align-items: end;
    margin-bottom: 0.5rem;
}

.tesoreria-filtros .form-label {
    margin-bottom: 0.25rem;
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--sochicit-petrol);
}

.tesoreria-filtros__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .tesoreria-filtros {
        grid-template-columns: minmax(14rem, 2fr) 1fr 1fr auto;
    }
}

.estado-socio {
    display: inline-block;
    padding: 0.15rem 0.65rem;
    border: 1px solid var(--sochicit-border);
    border-radius: 999px;
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
}

.estado-socio--activo {
    background: var(--sochicit-ice);
    border-color: var(--sochicit-petrol);
    color: var(--sochicit-petrol);
}

.estado-socio--inactivo {
    background: #FFF4E0;
    border-color: #C98A00;
    color: #6B4100;
}

.estado-socio--baja {
    background: var(--sochicit-light);
    border-style: dashed;
    color: var(--sochicit-muted);
}

.tesoreria-paginas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-top: 1rem;
    font-size: 0.95rem;
    color: var(--sochicit-muted);
}

.tesoreria-volver {
    padding-bottom: 0;
}

.gestion-seccion .gestion-enlace:first-child {
    margin-bottom: 0.9rem;
}

.tesoreria-nota {
    margin-bottom: 1.75rem;
}

/* B3.2.2: pagos de la cuota con acciones confirmables (acreditar, rechazar, anular). */
.tesoreria-mensajes {
    margin-bottom: 1.25rem;
}

.tesoreria-mensaje {
    margin: 0 0 0.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--sochicit-border);
    border-left-width: 4px;
    border-radius: 6px;
    background: var(--sochicit-white);
    font-size: 0.95rem;
    line-height: 1.5;
}

.tesoreria-mensaje--exito {
    border-color: var(--sochicit-petrol);
    background: var(--sochicit-ice);
    color: var(--sochicit-navy);
}

.tesoreria-mensaje--error {
    border-color: #B3261E;
    background: #FDF1F0;
    color: #7A1511;
}

.tesoreria-pagos {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tesoreria-pago {
    padding-block: 0.9rem;
    border-top: 1px solid var(--sochicit-border);
}

.tesoreria-pago:last-child {
    border-bottom: 1px solid var(--sochicit-border);
}

.tesoreria-pago__linea {
    margin: 0;
    font-size: 1rem;
}

.tesoreria-pago__estado {
    font-weight: 700;
}

.tesoreria-pago__estado--rechazado,
.tesoreria-pago__estado--anulado {
    color: var(--sochicit-muted);
    text-decoration: line-through;
}

.tesoreria-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-top: 0.6rem;
}

.tesoreria-accion {
    flex: 1 1 18rem;
    max-width: 34rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--sochicit-border);
    border-radius: 6px;
    background: var(--sochicit-white);
}

.tesoreria-accion > summary {
    cursor: pointer;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--sochicit-navy);
}

.tesoreria-accion > summary:focus-visible {
    outline: 3px solid var(--sochicit-blue);
    outline-offset: 2px;
}

.tesoreria-accion form {
    display: grid;
    gap: 0.6rem;
    margin-top: 0.75rem;
    font-size: 0.95rem;
}

.tesoreria-accion form p {
    margin: 0;
}

.tesoreria-accion .btn {
    justify-self: start;
}

/* B3.2.3: el panel «Crear cuota» dentro de la tabla del historial no debe ensanchar la página en móvil. */
.tesoreria-accion--cuota {
    flex: none;
    width: 100%;
    max-width: 100%;
    margin-top: 0.75rem;
    box-sizing: border-box;
}

.tesoreria-accion .btn {
    white-space: normal;
    text-align: left;
}

.membresia-historial td {
    min-width: 0;
}

/* B3.3.1-A: tarifas anuales de Tesorería. */
.tesoreria-filtros--tarifas {
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .tesoreria-filtros--tarifas {
        grid-template-columns: minmax(12rem, 16rem) auto;
    }
}

.tesoreria-respaldo {
    font-size: 0.9rem;
    line-height: 1.45;
}

/* B3.3.2: página de autorización de dos abonos. */
.gestion-seccion .membresia-datos + .gestion-subtitulo {
    margin-top: 1.5rem;
}

.tesoreria-historial-titulo {
    margin-top: 2.25rem;
}

/* B3.4-A: vista previa de la generación masiva de cuotas. */
.tesoreria-sin-tarifa p {
    margin: 0 0 0.5rem;
}

.tesoreria-sin-tarifa ul {
    margin: 0 0 0.75rem;
    padding-left: 1.25rem;
}

.tesoreria-excluir {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.tesoreria-excluir input {
    width: 1.15rem;
    height: 1.15rem;
}

.tesoreria-detalle-lote {
    margin-bottom: 1.25rem;
}

.tesoreria-detalle-lote > summary {
    cursor: pointer;
    margin-bottom: 0.75rem;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--sochicit-navy);
}

.tesoreria-total th,
.tesoreria-total td {
    border-top: 2px solid var(--sochicit-navy);
}

.tesoreria-exclusiones {
    margin-block: 1.5rem;
}

.tesoreria-huella {
    margin-top: 1.5rem;
}

/* B4: resumen financiero de cuotas sociales en el panel de Tesorería. */
.tesoreria-resumen {
    margin-bottom: 2.5rem;
}

.tesoreria-resumen__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.tesoreria-resumen__selector {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
}

.tesoreria-resumen__selector .form-select {
    width: auto;
    min-width: 6.5rem;
}

.membresia-datos .tesoreria-indicadores__nota {
    margin: 0.25rem 0 0;
    font-family: var(--font-body, inherit);
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--sochicit-text-muted, #5b6770);
}

.tesoreria-resumen .gestion-subtitulo {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.tesoreria-resumen .membresia-nota {
    margin-top: 0.75rem;
}

.tesoreria-barra {
    display: block;
    width: 100%;
    height: 0.75rem;
    margin-block: 1.25rem 0.75rem;
    appearance: none;
    border: 0;
    border-radius: 999px;
    overflow: hidden;
    background: var(--sochicit-border, #dee2e6);
}

.tesoreria-barra::-webkit-progress-bar {
    background: var(--sochicit-border, #dee2e6);
}

.tesoreria-barra::-webkit-progress-value {
    background: var(--sochicit-petrol, #0b5c6b);
}

.tesoreria-barra::-moz-progress-bar {
    background: var(--sochicit-petrol, #0b5c6b);
}

/* B4: bandeja operativa (todos los años), distinta de los indicadores del año. */
.tesoreria-bandeja {
    margin-bottom: 2.5rem;
    padding: 1.25rem 1.5rem;
    background: var(--sochicit-surface, #f6f8fa);
    border-left: 4px solid var(--sochicit-petrol, #0b5c6b);
    border-radius: 0.5rem;
}

/* B3.5: accesos rápidos del panel y retorno a los filtros del listado. */
.tesoreria-accesos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.tesoreria-volver-filtros {
    margin-top: 1.25rem;
}

/* B3.5: listas del panel de Tesorería (tamaño de texto de trabajo, no de portada). */
.tesoreria-lista li {
    padding-block: 1rem;
    font-size: 1.05rem;
    font-weight: 600;
}

.tesoreria-lista form {
    margin: 0;
}

.tesoreria-lista .link-arrow--button {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--sochicit-navy);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.tesoreria-lista .link-arrow--button:hover {
    color: var(--sochicit-petrol);
    text-decoration: underline;
}

/* B3.4-B: bloque de confirmación de la generación masiva. */
.tesoreria-confirmacion {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--bs-border-color, #dee2e6);
}

.tesoreria-confirmacion .socios-form-section {
    margin-top: 1rem;
}

.tesoreria-confirmacion .form-control {
    max-width: 12rem;
}

/* B3.4-A: aire entre las secciones de la vista previa. */
.tesoreria-exclusiones + .gestion-subtitulo,
.tesoreria-detalle-lote + .gestion-subtitulo,
.gestion-seccion .gestion-vacio + .gestion-subtitulo {
    margin-top: 1.75rem;
}