/**
 * Autoridades — organigrama institucional
 *
 * Server-rendered, no-JS org chart replacing the PDF iframe at
 * atm/informacion-fiscal/autoridades.php. Every Área list is a native
 * <details>/<summary> disclosure — no client JavaScript is required for any
 * interaction on this page.
 *
 * SPECIFICITY NOTE
 * Divi injects aggressive styles for headings, paragraphs and lists inside
 * #main-content. Instead of blanket !important, every rule here is scoped
 * under `#main-content .atm-org-page` (or `#main-content .dgr-breadcrumb-*`
 * for the breadcrumb, which sits outside the .atm-org-page wrapper), which
 * outranks Divi's selectors on its own.
 *
 * !important is restricted to four places, and nowhere else:
 *   1. The RESET block, where Divi sets the same property at equal specificity.
 *   2. Properties Divi sets with !important of its own, where specificity
 *      alone cannot win: box spacing on headings, paragraphs and lists, and
 *      link colour inside #main-content.
 *   3. The focus ring, because Divi resets outlines inside #main-content and
 *      losing a visible focus indicator is a WCAG 2.4.7 failure.
 *   4. The print block, to force collapsed <details> open on paper.
 * Every occurrence outside the RESET carries its own local comment saying
 * which of these it is. If you are adding a fifth reason, you are probably
 * fighting the wrong selector — check specificity first.
 *
 * BREADCRUMB URL FIX
 * The moved breadcrumb background-image was previously an inline <style> on
 * the template, where the relative path resolved against the *page* URL.
 * Inside this stylesheet a relative path would resolve against the
 * *stylesheet* URL instead and break, so the URL below is root-relative
 * (`/wp-content/uploads/...`), which is both location- and
 * domain-independent.
 */

/* ========================================================================
   TOKENS
   ======================================================================== */
.atm-org-page {
    /* Brand — ATM, matching the medios-pago.css palette. */
    --org-brand-deep: #612247;
    --org-brand: #B6264F;
    --org-brand-violet: #632789;
    --org-brand-crimson: #AD0038;

    /* Rank surfaces. Two families by explicit request (Teams, 11/08):
       conducción keeps its solid fills — Dirección General in the system
       blue that contacto, the simuladores and the sorteos pages already
       use, Subdirección in the brand magenta — and everything below went
       from solid magenta to a light glass tint of that same magenta
       ("un clarito, algo más moderno"). No icons, also by request.

       The gradients' dark ends are site colours too, not inventions:
       #023F5E and #8F3260 both ship in atm-benefits.css. Gradients may
       only DARKEN from the base — a lighter blue end drops white text
       under 4.5:1 (measured 3.49:1 at #0092CF; do not).

       White text, measured at each gradient's lightest point: lead 4.61:1,
       sublead 5.54:1. Lead has the least headroom — do not lighten it
       without re-measuring. Áreas take no fill; rank is carried by row
       position, title text and name/disclosure presence, not colour
       alone. */
    --org-rank-lead: #007CB6;
    --org-rank-lead-deep: #023F5E;
    --org-rank-sublead: #BA2C86;
    --org-rank-sublead-deep: #8F3260;

    /* Glass surface for Direcciones and despachos: a magenta tint over the
       page, not a grey — grey glass reads as disabled. The blur only shows
       against the wash behind the chart (see .atm-org__viewport); the rgba
       tint IS the fallback where backdrop-filter is unsupported, so the
       card never depends on the blur to be a card. */
    --org-glass-bg: rgba(186, 44, 134, 0.07);
    --org-glass-border: rgba(186, 44, 134, 0.22);

    /* Ink — verified ≥4.5:1 on both surfaces */
    --org-ink: #1F2124;
    --org-ink-soft: #4A4D52;
    --org-ink-muted: #6B6F76;

    /* Surfaces */
    --org-surface: #FFFFFF;
    --org-surface-alt: #F7F7F9;
    --org-line: #E3E4E8;
    --org-line-strong: #C9CBD1;

    /* Ground-relative: interactive text on the current surface. Re-pointed
       to white by .atm-org__node--fill below, so every filled card's toggle
       and chevron follow the surface without a per-component rule. */
    --org-accent: var(--org-brand);

    /* Focus — cleared for 3:1 against both card and page surfaces */
    --org-focus: var(--org-brand-crimson);

    /* Connectors carry the hierarchy, so they are non-text content that
       conveys meaning and owe WCAG 1.4.11's 3:1. Violet-grey rather than
       the mockup's pale lavender ON PURPOSE: the lavender measures ~1.6:1
       and fails; this keeps the violet cast at 3.41:1 on #FFFFFF and
       3.31:1 against the wash's darkest point. Do not lighten it toward
       the mockup without re-measuring — 3.0 is the floor. */
    --org-connector: #8B87AD;

    /* Spacing — 4pt scale */
    --org-space-2xs: 0.25rem;
    --org-space-xs: 0.5rem;
    --org-space-sm: 0.75rem;
    --org-space-md: 1rem;
    --org-space-lg: 1.5rem;
    --org-space-xl: 2rem;
    --org-space-2xl: 3rem;

    /* Type — fixed rem scale */
    --org-text-sm: 0.9375rem;
    --org-text-base: 1rem;
    --org-text-lg: 1.125rem;
    --org-text-xl: 1.375rem;
    --org-text-2xl: 1.75rem;

    --org-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --org-radius: 12px;
    --org-radius-sm: 8px;
}

/* ========================================================================
   RESET — reason 1 for !important (see the header note for all four)
   ======================================================================== */
#main-content .atm-org-page {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100%;
    font-family: var(--org-font);
    color: var(--org-ink);
    font-kerning: normal;
}

#main-content .atm-org-page * {
    box-sizing: border-box;
}

#main-content .atm-org-page h1,
#main-content .atm-org-page h2,
#main-content .atm-org-page h3,
#main-content .atm-org-page p,
#main-content .atm-org-page ul {
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--org-font) !important;
}

#main-content .atm-org-page ul {
    list-style: none !important;
}

#main-content .atm-org-page li::before {
    content: none !important;
}

/* ========================================================================
   BREADCRUMB — moved verbatim from the template's inline <style>, class
   names unchanged (.dgr-*). Sits outside .atm-org-page, so it is scoped to
   #main-content only. Background URL rewritten to root-relative (see
   header note); everything else is an unmodified move.
   ======================================================================== */
#main-content .dgr-breadcrumb-section {
    position: relative;
    background: url('/wp-content/uploads/2024/01/Rectangle-35-7.png') center/cover no-repeat;
    color: #ffffff;
    text-align: left;
    padding: 80px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    font-family: 'Poppins', sans-serif;
}

#main-content .dgr-breadcrumb-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(16, 25, 49, 0.85);
    z-index: 0;
}

#main-content .dgr-breadcrumb-content {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    color: #ffffff;
}

#main-content .dgr-breadcrumb-title {
    font-size: 40px;
    font-weight: 900;
    margin-bottom: 15px;
    color: #fff;
    text-transform: uppercase;
}

#main-content .dgr-breadcrumb-description {
    font-size: 20px;
    margin-bottom: 30px;
    max-width: 800px;
    line-height: 1.7em;
    font-weight: 400;
    letter-spacing: 0.5px;
    color: #eaeaea;
}

#main-content .dgr-breadcrumb-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

/* !important reason 2: Divi colours links inside #main-content with its own
   !important, so white-on-overlay cannot be won by specificity alone. */
#main-content .dgr-breadcrumb-nav a {
    color: #ffffff !important;
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
}

#main-content .dgr-breadcrumb-nav a:hover {
    color: #0078ff;
    transform: translateY(-2px);
}

#main-content .dgr-breadcrumb-nav li {
    font-size: 15px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    padding: 10px 20px;
    border-radius: 25px;
    transition: box-shadow 0.3s ease, background 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

#main-content .dgr-breadcrumb-nav li:hover {
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

#main-content .dgr-breadcrumb-nav .dgr-breadcrumb-separator {
    background: transparent;
    padding: 0;
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    margin: 0 15px;
}

#main-content .dgr-breadcrumb-nav .dgr-current-page {
    background: #ffffff;
    color: #444444;
    font-size: 15px;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 25px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

#main-content .dgr-breadcrumb-nav .dgr-current-page:hover {
    background: #f9f9f9;
    color: #333333;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* ========================================================================
   SECTIONS
   ======================================================================== */
/* !important reason 2: Divi sets section margins with its own !important. */
#main-content .atm-org-page .atm-org__section {
    max-width: 1200px;
    margin: 0 auto !important;
    padding: var(--org-space-2xl) var(--org-space-lg);
}

/* !important reason 2: heading spacing, set by Divi with its own !important. */
#main-content .atm-org-page .atm-org__section > h2 {
    font-size: var(--org-text-2xl);
    font-weight: 700;
    color: var(--org-brand-deep);
    margin-bottom: var(--org-space-lg) !important;
}

/* ========================================================================
   CHART — the stacked/tree switch
   ========================================================================
   Below --org-chart-bp the nodes stack in document order and the connectors
   become a left rail: no sideways scrolling, no script, nothing to learn.
   At and above it the same markup lays out as a real chart. The viewport
   overflows there on purpose — seven Direcciones do not fit 1200px — and
   scrolls natively. js/autoridades-chart.js upgrades that scroll to
   drag-and-zoom; without it the chart is still fully reachable.
   ======================================================================== */
#main-content .atm-org-page .atm-org__chart {
    position: relative;
}

#main-content .atm-org-page .atm-org__viewport {
    overflow: auto;
    overscroll-behavior-x: contain;
    /* The wash the glass cards blur against. Deliberately faint — it must
       tint, never compete with the chart — and built from the two rank
       colours so the glass picks up institutional colour instead of grey.
       The connector grey was re-measured against the wash's darkest point:
       3.12:1, still over WCAG 1.4.11's 3:1. Removed for print. */
    background:
        radial-gradient(56rem 22rem at 16% 0%, rgba(0, 124, 182, 0.05), transparent 62%),
        radial-gradient(56rem 22rem at 84% 100%, rgba(186, 44, 134, 0.06), transparent 62%);
    /* `safe center` is correct for THIS mode and only this one: the container
       scrolls natively here, and plain `center` on an overflowing flex
       container pushes the left edge behind the scroll origin where no
       scrollbar can reach it — the classic "cannot scroll back to the start"
       bug. `safe` bails to flex-start as soon as the content stops fitting,
       so a chart wider than the screen stays fully reachable and one that
       fits is centred.

       Do NOT read this as the centring rule for the whole page. Under
       Panzoom the bail-out is what pushes the chart off-centre, so
       `.is-pannable` overrides it with plain `center`; the long comment
       there explains why the trade flips. */
    display: flex;
    justify-content: safe center;
    /* flex-start, never the default stretch. The static-fit path pins an
       explicit height on this viewport (scaled canvas height), and stretch
       then SQUISHES the canvas's layout box down to that pinned height —
       measured on wp-test: 629px of natural canvas crushed to 451px. The
       content overflows the crushed box and paints flush against the
       viewport's bottom edge, so the chart's bottom padding visually
       disappears and the section below sits 2px from the lowest card —
       or on top of it, once fractional display scaling rounds the other
       way. With flex-start the canvas keeps its natural height, the pinned
       height equals the painted height including padding, and the
       breathing room survives. */
    align-items: flex-start;
}

#main-content .atm-org-page .atm-org__canvas {
    flex: 0 0 auto;

    /* transform-origin matters once Panzoom takes over: scaling from the top
       centre keeps the Dirección General under the cursor instead of drifting
       off-screen on the first zoom step. It is also half of what makes the
       `.is-pannable` centring work — that rule puts this 50% point on the
       viewport's centre, so the two must be changed together. */
    transform-origin: 50% 0;
}

/* The chart draws its own hierarchy, so on that layout the "Direcciones"
   heading is removed from view but kept for assistive tech — a visible label
   there would cut the trunk line in half. */
#main-content .atm-org-page .atm-org__section-label {
    font-size: var(--org-text-2xl);
    font-weight: 700;
    color: var(--org-brand-deep);
}

/* ========================================================================
   NODES — one box model, four ranks
   ======================================================================== */
#main-content .atm-org-page .atm-org__node {
    position: relative;
    border-radius: var(--org-radius);
    padding: var(--org-space-md) var(--org-space-lg);
}

/* ---- fill: ONE ground-relative layer, not a rule per surface ----
   Custom properties inherit, so re-pointing seven of them here is what lets
   every downstream component (toggle, focus ring, dividers, person/count
   text) follow whichever surface it lands on with zero component-level
   colour rules. Adding a future rank costs one token, one background rule
   and this class in the markup — nothing else. */
#main-content .atm-org-page .atm-org__node--fill {
    color: var(--org-ink);
    --org-ink: #FFFFFF;
    --org-ink-soft: rgba(255, 255, 255, 0.92);
    --org-ink-muted: rgba(255, 255, 255, 0.80);
    --org-line: rgba(255, 255, 255, 0.32);
    --org-line-strong: rgba(255, 255, 255, 0.55);
    --org-accent: #FFFFFF;
    --org-focus: #FFFFFF;
}

/* Leadership is the focal point of the whole chart, and filling it is what
   makes the hierarchy readable at a glance instead of only in the markup.
   The gradient runs base-to-darker only — the tokens note has the measured
   reason — and the flat base stays as first value: it is the paint used if
   gradients ever fail, and the colour the contrast was measured against. */
#main-content .atm-org-page .atm-org__node--lead {
    background: var(--org-rank-lead); /* white text = 4.61:1 — tightest on the page, see the tokens note */
    background: linear-gradient(135deg, var(--org-rank-lead) 0%, var(--org-rank-lead-deep) 100%);
    box-shadow: 0 10px 28px rgba(2, 63, 94, 0.22);
}

/* Structural, not positional. The template sets this class when a leadership
   node's post_parent is another leadership node — that is the hierarchy the
   editor actually entered. A ":not(:first-child)" rule would look identical
   today and quietly swap the two ranks the first time somebody reorders them
   in wp-admin, which is the same failure mode this renderer avoids
   everywhere else by keying on data rather than on paint order. */
#main-content .atm-org-page .atm-org__node--sublead {
    background: var(--org-rank-sublead); /* white text = 5.54:1 */
    background: linear-gradient(135deg, var(--org-rank-sublead) 0%, var(--org-rank-sublead-deep) 100%);
    box-shadow: 0 10px 28px rgba(143, 50, 96, 0.22);
}

#main-content .atm-org-page .atm-org__node--lead h3 {
    font-size: var(--org-text-xl);
    font-weight: 700;
    letter-spacing: -0.01em;
    /* Declared, not inherited — the same way --dir h3 does it. Inheritance
       from .atm-org__node--fill loses to any DIRECT Divi rule on h3, which
       is exactly what was painting these two titles dark on the filled
       cards. Resolves to white inside the fill and to black in print, where
       the print block re-points --org-ink. */
    color: var(--org-ink);
}

/* ---- glass: the counterpart of --fill, declared AFTER it on purpose ----
   The template still marks these cards --fill, and --fill flips every ink
   token to white — correct for the solid conducción cards, illegible on a
   light surface. This block wins on source order at equal specificity and
   re-points the same seven tokens back to dark, so the toggle, the count,
   the person name, the dividers and the focus ring all follow the surface
   with zero component rules — the exact mechanism --fill uses, run in the
   other direction. If you touch one of these blocks, check the other.

   Measured on the glass surface OVER the wash (its true, slightly darker
   ground — not over plain white): ink 13.9:1, ink-soft 7.2:1, ink-muted
   5.6:1, toggle/accent 5.5:1, title 10.1:1. The muted value is #5F626A and
   not the page's #6B6F76 because the page value lands at 4.4:1 here — an
   AA failure by a hair that only shows up once the surface is tinted. */
#main-content .atm-org-page .atm-org__node--dir,
#main-content .atm-org-page .atm-org__node--despacho {
    background: var(--org-glass-bg);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid var(--org-glass-border);
    box-shadow: 0 8px 24px rgba(97, 34, 71, 0.10);
    color: var(--org-ink);
    --org-ink: #1F2124;
    --org-ink-soft: #4A4D52;
    --org-ink-muted: #5F626A;
    --org-line: rgba(182, 38, 79, 0.25);
    --org-line-strong: #C9CBD1;
    --org-accent: var(--org-brand);
    --org-focus: var(--org-brand-crimson);
}

#main-content .atm-org-page .atm-org__node--dir {
    /* A column so the disclosure can be pushed to the bottom edge: that is
       what makes seven cards with one-, two- and three-line titles read as
       one row instead of a ragged staircase. */
    display: flex;
    flex-direction: column;
}

#main-content .atm-org-page .atm-org__node--dir h3 {
    font-size: var(--org-text-lg);
    font-weight: 700;
    line-height: 1.25;
    /* Brand plum, not body ink: on the light card the title is what carries
       the institutional colour the fill used to. 10.1:1 on the glass. */
    color: var(--org-brand-deep);
    text-wrap: balance;
}

/* A despacho carries no <h3> — it is a unit, not an official, and giving it a
   heading would put a tenth entry in a document outline that lists exactly the
   nine people who hold a post. Its <p> therefore has to earn the weight a
   heading would have given it, rather than inheriting body defaults and
   reading as a caption. */
#main-content .atm-org-page .atm-org__node-title {
    font-size: var(--org-text-sm);
    font-weight: 600;
    line-height: 1.3;
    color: inherit;
    text-wrap: balance;
}

/* !important reason 2: paragraph spacing, set by Divi with its own !important. */
#main-content .atm-org-page .atm-org__person {
    font-size: var(--org-text-base);
    color: var(--org-ink-soft);
    margin-top: var(--org-space-xs) !important;
}

#main-content .atm-org-page .atm-org__node--lead .atm-org__person {
    font-weight: 500;
}

/* ========================================================================
   STACKED LAYOUT — the default, and everything a phone ever gets
   ========================================================================
   The rail is a single vertical line down the left with a short tick into
   each node, which is the hierarchy expressed in the one direction a narrow
   screen actually has.
   ======================================================================== */
#main-content .atm-org-page .atm-org__spine,
#main-content .atm-org-page .atm-org__branches {
    display: flex;
    flex-direction: column;
    gap: var(--org-space-lg);
    position: relative;
}

/* !important reason 2, and this one is subtle enough to be worth spelling
   out: .atm-org__branches is a <ul>, and the RESET block above zeroes
   margin AND padding on every ul with !important. Any spacing this
   component needs on that element therefore has to be !important too —
   specificity cannot beat an !important declaration. Losing this silently
   collapses the rail on mobile and, on the tree layout, flattens the trunk
   to zero so the horizontal bar ends up glued to the leadership card. */
#main-content .atm-org-page .atm-org__spine,
#main-content .atm-org-page .atm-org__branches {
    padding-left: var(--org-space-lg) !important;
}

#main-content .atm-org-page .atm-org__spine::before,
#main-content .atm-org-page .atm-org__branches::before {
    content: "";
    position: absolute;
    left: 0;
    top: var(--org-space-lg);
    bottom: var(--org-space-lg);
    width: 2px;
    background: var(--org-connector);
}

#main-content .atm-org-page .atm-org__node::before {
    content: "";
    position: absolute;
    left: calc(var(--org-space-lg) * -1);
    top: var(--org-space-lg);
    width: var(--org-space-lg);
    height: 2px;
    background: var(--org-connector);
}

/* A despacho stacks under the leadership card it belongs to, and reaches the
   same rail with the same tick — .atm-org__rank adds no padding, so the node
   inside it still sits on the spine's content edge.
   The rank wrapper is NOT a flex container at this width, so the spine's own
   gap does not apply inside it and the two cards would otherwise touch.
   !important is reason 2: this is a <ul> and the RESET zeroes list margins
   with !important, which specificity alone cannot outrank. */
#main-content .atm-org-page .atm-org__aides {
    margin-top: var(--org-space-lg) !important;
    display: flex;
    flex-direction: column;
    gap: var(--org-space-lg);
}

#main-content .atm-org-page .atm-org__branch {
    position: relative;
}

/* ========================================================================
   TREE LAYOUT — 64rem and up
   ========================================================================
   Same DOM as the stacked layout; only the connectors and the flow direction
   change. The horizontal bar is drawn as one segment per branch rather than
   one bar across the row, so the first and last segments stop at their own
   node's centre and the bar ends exactly where the tree does. With a single
   Dirección both rules apply at once, the segment collapses to zero width,
   and the chart correctly shows a stem with no bar.
   ======================================================================== */
@media (min-width: 64rem) {

    /* Declared only inside this breakpoint: leaking it into the stacked
       layout would clamp a despacho card to 8rem on a phone, where every
       other node is full width. */
    .atm-org-page {
        --org-despacho-width: 8rem;
    }

    /* A bounded stage is what makes "the whole chart on one screen" mean
       anything: without a height limit the viewport just grows and the fit
       calculation has no vertical budget to work against. 78vh leaves room
       for the Divi header and the controls above it. Opening several áreas
       exceeds it on purpose — that is what panning is for. */
    #main-content .atm-org-page .atm-org__viewport {
        max-height: min(78vh, 54rem);
    }

    /* While an áreas list is open the stage gives way instead of the reader
       having to fight it: the height cap is dropped and the page scrolls as
       usual. This is what lets the toggle leave the zoom untouched — the
       script adds this class, and removes it when everything is closed
       again, so the chart goes back to fitting one screen. */
    #main-content .atm-org-page .atm-org__chart.is-expanded .atm-org__viewport {
        max-height: none;
    }

    #main-content .atm-org-page .atm-org__canvas {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* Wider than its viewport on purpose: this is the overflow Panzoom
           exists to make navigable, and that native scroll is the no-JS
           fallback. */
        min-width: max-content;
        padding: var(--org-space-2xl) var(--org-space-2xl) var(--org-space-xl);
    }

    #main-content .atm-org-page .atm-org__canvas .atm-org__section {
        max-width: none;
        padding: 0;
    }

    #main-content .atm-org-page .atm-org__canvas .atm-org__section > h2 {
        text-align: center;
    }

    /* Kept for assistive tech, removed from view — see the template comment. */
    #main-content .atm-org-page .atm-org__section-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* ---- spine: leadership chained vertically ---- */
    #main-content .atm-org-page .atm-org__spine {
        align-items: center;
        gap: 0;
        /* !important reason 2, and it is load-bearing rather than cosmetic.
           The stacked rule sets padding-left with !important because it also
           targets .atm-org__branches, which is a <ul> the RESET would
           otherwise zero — but the declaration lands on this <div> too, and a
           plain `padding-left: 0` cannot outrank it.
           Left unbeaten it offsets the spine's CONTENT box 24px right of its
           border box, so `align-items: center` centres the leadership cards
           on 964px while the trunk and the Direcciones row are centred on
           952px. The vertical connector then drops out of the card and
           reaches the bar 12px to the side, reading as a broken line. */
        padding-left: 0 !important;
    }

    #main-content .atm-org-page .atm-org__spine::before {
        display: none;
    }

    /* Node width is the single lever that decides whether the whole chart
       fits one screen. The row now carries seven Direcciones and nothing
       else — the two Despachos moved onto the spine, where they cost this
       calculation nothing because they are positioned out of flow:
         7 Direcciones x 14rem (224px) = 1568px
         6 gaps        x  1rem  (16px) =   96px
         canvas padding                =   96px
                                          ------
                                          1760px
       At a 1905px viewport that fits at 1.0 — the cap — instead of 0.91, and
       a 1500px notebook lands at 0.81 instead of 0.72, so MIN_SCALE's clamp
       is no longer anywhere near. Re-run this arithmetic before adding
       anything to the row. */
    #main-content .atm-org-page .atm-org__node {
        width: 14rem;
        text-align: center;
    }

    /* ---- rank: one leadership card plus the despacho attached to it ----
       Carries no box of its own. It exists so .atm-org__aides has something
       to position against, and so the vertical chain is measured between
       ranks rather than between cards. */
    #main-content .atm-org-page .atm-org__rank {
        position: relative;
        display: flex;
        justify-content: center;
    }

    /* Semantic, not positional. The gap belongs to the card that HANGS off
       another one — a fact the template already resolves from post_parent,
       see its comment on --sublead. The `:first-child` rule this replaces
       read the same today and would have put the connector on the wrong card
       the first time somebody reordered the two ranks in wp-admin, which is
       the exact bug the template refuses to allow. */
    #main-content .atm-org-page .atm-org__rank--sublead {
        margin-top: var(--org-space-xl);
    }

    /* Leadership stays wider than the branches: it is the focal point, and
       it is not multiplied by seven, so its width costs nothing above.
       Scoped to --lead rather than to `.atm-org__spine .atm-org__node`,
       because that descendant form now also matches the despacho nested
       inside the rank — which would blow it up to 20rem and hang a stray
       connector off it. */
    #main-content .atm-org-page .atm-org__spine .atm-org__node--lead {
        width: 20rem;
        margin-top: 0;
    }

    /* The connector filling the gap above. Its height and the rank's
       margin-top are the same token on purpose. */
    #main-content .atm-org-page .atm-org__spine .atm-org__node--sublead::before {
        display: block;
        left: 50%;
        top: auto;
        bottom: 100%;
        width: 2px;
        height: var(--org-space-xl);
        transform: translateX(-50%);
        border-radius: 999px;
    }

    /* Only the subordinate card carries one; the top of the chain hangs off
       nothing. */
    #main-content .atm-org-page .atm-org__spine .atm-org__node--lead:not(.atm-org__node--sublead)::before {
        display: none;
    }

    /* ---- aides: the despacho attached to a leadership card ----
       Out of flow on purpose. In flow it would widen the spine and shift the
       whole chain off the trunk axis it shares with the Direcciones row
       below; out of flow the spine still measures 20rem, stays centred, and
       the canvas keeps the 1760px the fit maths depends on. There is room:
       the row is 110rem wide against a 20rem spine, so each side has roughly
       45rem of slack for an 8rem card. */
    #main-content .atm-org-page .atm-org__aides {
        position: absolute;
        left: 100%;
        top: 50%;
        transform: translateY(-50%);
        /* !important on BOTH margins, reason 2. The RESET zeroes `margin` on
           every <ul> with !important, and that shorthand covers all four
           sides — so a plain `margin-left` here silently resolves to 0, the
           despacho lands flush against the leadership card, and the tie line
           draws straight over it. Measured on wp-test before this fix:
           computed margin-left 0px, card and aide both ending at x=1124.
           margin-top has the mirror problem: the stacked rule sets it with
           !important, and only !important can switch it back off, or `top:
           50%` centres the aide and then the margin pushes it 2rem below the
           card it is tied to. */
        margin-left: var(--org-space-xl) !important;
        margin-top: 0 !important;
        display: flex;
        flex-direction: column;
        gap: var(--org-space-xs);
    }

    #main-content .atm-org-page .atm-org__aide {
        position: relative;
    }

    /* Horizontal tie back to the leadership card, in the same 2px and
       --org-connector as every other line, so it reads as part of the
       drawing rather than a decoration. */
    #main-content .atm-org-page .atm-org__aide::before {
        content: "";
        position: absolute;
        top: 50%;
        right: 100%;
        width: var(--org-space-xl);
        height: 2px;
        background: var(--org-connector);
        transform: translateY(-50%);
        border-radius: 999px;
    }

    /* The despacho already gets its tie from .atm-org__aide::before above;
       the node's own stacked-layout connector would draw a second, orphaned
       stub on top of it. */
    #main-content .atm-org-page .atm-org__aide .atm-org__node::before {
        display: none;
    }

    /* ---- one despacho per side ----
       The rules above put every aide on the right, which leaves the whole
       leadership block hanging to one side of a chart that is otherwise
       symmetrical. The top rank's despacho moves to the left instead, so the
       two sit diagonally across the spine and the block reads balanced.

       Side is chosen from --sublead, the same hierarchy fact the template
       resolves from post_parent — never from :first-child or paint order.
       With one rank the selector simply does not match and that single
       despacho stays on the right, which is still correct.

       The source PDF parks both despachos in the bottom-left margin, below
       the Direcciones row. That is a page-fitting decision on landscape
       paper, not a statement about hierarchy — read literally it would say a
       despacho reports to a Dirección, which its own name contradicts. What
       is reproduced here is the attachment, not the parking spot.

       Costs no width: these are out of flow, so the canvas stays at the
       1760px the fit calculation depends on and the spine stays on the trunk
       axis. At the narrowest tree width the left card lands ~200px inside
       the canvas edge, and below the breakpoint both go back into normal
       flow underneath their card. */
    #main-content .atm-org-page .atm-org__rank:not(.atm-org__rank--sublead) .atm-org__aides {
        left: auto;
        right: 100%;
        /* Mirrors the margin the shared rule puts on the other side. Both
           need !important for the same reason it does — the <ul> RESET zeroes
           `margin` on all four sides at once. */
        margin-left: 0 !important;
        margin-right: var(--org-space-xl) !important;
    }

    /* The tie has to leave from the other edge too, or it draws away from the
       card it is meant to reach. */
    #main-content .atm-org-page .atm-org__rank:not(.atm-org__rank--sublead) .atm-org__aide::before {
        right: auto;
        left: 100%;
    }

    /* ---- branches: the Direcciones row ---- */
    #main-content .atm-org-page .atm-org__branches {
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        /* 1rem, not --org-space-lg: six gaps at 1.5rem cost 144px of the
           width budget, and 96px buys back a whole step of legibility. */
        gap: 1rem;
        /* !important on both: see the reason-2 note on the stacked rule.
           This element is a <ul> and the RESET zeroes its box spacing with
           !important, so without these the trunk has no room to exist. */
        padding-left: 0 !important;
        padding-top: var(--org-space-2xl) !important;
    }

    /* Trunk: drops from the last leadership node into the bar. Its height MUST
       equal .atm-org__branches padding-top, or the line stops short and the
       bar appears to float away from the chart. */
    #main-content .atm-org-page .atm-org__branches::before {
        left: 50%;
        top: 0;
        bottom: auto;
        height: var(--org-space-2xl);
        transform: translateX(-50%);
        /* Fully rounded line ends, here and on every stub below: on a 2px
           stroke it is a subtle softening, and it is what makes the lines
           read as drawn strokes rather than borders. */
        border-radius: 999px;
    }

    #main-content .atm-org-page .atm-org__branch {
        padding-top: var(--org-space-xl);
    }

    /* Vertical stub from the bar down into each Dirección. Height MUST equal
       .atm-org__branch padding-top, same reason as the trunk. */
    #main-content .atm-org-page .atm-org__branch::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 0;
        width: 2px;
        height: var(--org-space-xl);
        background: var(--org-connector);
        transform: translateX(-50%);
        border-radius: 999px;
    }

    /* One bar segment per branch, overhanging half the flex gap on each side
       so adjacent segments meet in the middle of the gap and read as a single
       bar. That overhang is coupled to the gap above — change one, change
       both. Interior branches get a plain T junction. */
    #main-content .atm-org-page .atm-org__branch::after {
        content: "";
        position: absolute;
        top: 0;
        left: -0.5rem;
        right: -0.5rem;
        height: 2px;
        background: var(--org-connector);
    }

    /* The two outer branches get a rounded elbow instead of a bar that stops
       dead and a separate stub that starts under it. A right angle drawn as
       two abutting rectangles always shows a nick at the corner; one bordered
       box with a corner radius is a single continuous stroke, which is what
       makes a chart read as drawn rather than assembled.
       The box replaces BOTH the bar segment and the stub for these two, so
       their ::before is switched off below. */
    #main-content .atm-org-page .atm-org__branch:first-child::after,
    #main-content .atm-org-page .atm-org__branch:last-child::after {
        height: var(--org-space-xl);
        background: none;
        border-top: 2px solid var(--org-connector);
    }

    #main-content .atm-org-page .atm-org__branch:first-child::after {
        /* -1px so the elbow's left border sits centred on the node axis,
           exactly where the interior stubs land. The wider radius is part
           of the modern-lines pass: a gentler curve reads as a drawn path.
           It cannot exceed the elbow's height (--org-space-xl). */
        left: calc(50% - 1px);
        right: -0.5rem;
        border-left: 2px solid var(--org-connector);
        border-top-left-radius: var(--org-radius);
    }

    #main-content .atm-org-page .atm-org__branch:last-child::after {
        left: -0.5rem;
        right: calc(50% - 1px);
        border-right: 2px solid var(--org-connector);
        border-top-right-radius: var(--org-radius);
    }

    #main-content .atm-org-page .atm-org__branch:first-child::before,
    #main-content .atm-org-page .atm-org__branch:last-child::before {
        display: none;
    }

    /* A single Dirección is both first and last: the two elbow rules would
       collapse into a zero-width box carrying two borders. It needs the plain
       stem instead, and no bar at all. */
    #main-content .atm-org-page .atm-org__branch:only-child::after {
        display: none;
    }

    #main-content .atm-org-page .atm-org__branch:only-child::before {
        display: block;
    }

    /* On the stacked layout this pseudo-element is the rail tick; the tree
       used to just hide it. Reusing it as a small anchor dot where the stub
       meets the card is the mockup's junction detail at zero extra markup —
       and it is the connector colour, so it inherits the measured 3:1. */
    #main-content .atm-org-page .atm-org__branch .atm-org__node::before {
        left: 50%;
        top: -4px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--org-connector);
        transform: translateX(-50%);
    }

    #main-content .atm-org-page .atm-org__node--dir {
        text-align: left;
    }

    /* Slack, not the floor: 8rem leaves 37px of headroom for Divi's container
       padding at a 1500px notebook before the fit scale clamps to MIN_SCALE.
       See design D3 for the full arithmetic. */
    #main-content .atm-org-page .atm-org__node--despacho {
        width: var(--org-despacho-width);
        padding: var(--org-space-sm);
        font-size: var(--org-text-sm);
    }

    /* ---- uniform cards ----
       The seven cards differ only in how many lines their title and their
       person name take: "Dirección de Recaudaciones" is two lines, "Dirección
       de Coordinación de Políticas Fiscales" is three. Reserving the worst
       case for both makes every collapsed card identical BY CONSTRUCTION,
       with no hand-tuned total height to drift out of date when the type
       scale changes.
       This is deliberately not `align-items: stretch`: stretch would also
       make opening one áreas list inflate the other six. */
    #main-content .atm-org-page .atm-org__node--dir h3 {
        min-height: calc(3 * 1.25em);
    }

    #main-content .atm-org-page .atm-org__node--dir .atm-org__person {
        min-height: calc(2 * 1.5em);
    }

    /* Pins the disclosure to the bottom edge, so the "Ver áreas" row lines up
       across all seven cards instead of floating at seven different heights. */
    #main-content .atm-org-page .atm-org__node--dir .atm-org__details {
        margin-top: auto;
    }
}

/* ========================================================================
   CHART CONTROLS — injected by js/autoridades-chart.js, never in the markup
   ========================================================================
   These styles describe controls that only exist once the script has run.
   Nothing here is visible on a no-JS page, which is why the template does
   not ship an empty toolbar promising interactions that will not happen.
   ======================================================================== */
#main-content .atm-org-page .atm-org__controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--org-space-xs);
    justify-content: flex-end;
    padding-bottom: var(--org-space-sm);
}

#main-content .atm-org-page .atm-org__control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--org-space-2xs);
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0 var(--org-space-sm);
    border: 1px solid var(--org-line-strong);
    border-radius: var(--org-radius-sm);
    background: var(--org-surface);
    color: var(--org-brand-deep);
    font-family: var(--org-font);
    font-size: var(--org-text-base);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

#main-content .atm-org-page .atm-org__control:hover {
    background: var(--org-surface-alt);
    border-color: var(--org-brand);
}

#main-content .atm-org-page .atm-org__control[disabled] {
    opacity: 0.45;
    cursor: default;
}

#main-content .atm-org-page .atm-org__control[disabled]:hover {
    background: var(--org-surface);
    border-color: var(--org-line-strong);
}

#main-content .atm-org-page .atm-org__hint {
    margin-right: auto;
    font-size: var(--org-text-sm);
    color: var(--org-ink-muted);
}

/* Panzoom binds pointer events on the canvas; this stops a drag from turning
   into a text selection halfway across the chart. */
#main-content .atm-org-page .atm-org__viewport.is-pannable {
    cursor: grab;
    touch-action: none;
    user-select: none;

    /* A dragged chart must not also scroll its own container. */
    overflow: hidden;

    /* Plain `center`, overriding the `safe center` the no-JS viewport needs.
       This is the rule that actually centres the chart, and the reason it has
       to differ per mode is that the two modes navigate differently.

       `safe center` exists so an overflowing chart stays SCROLLABLE: it bails
       to flex-start the moment the content stops fitting, because centred
       overflow puts the left edge behind the scroll origin where no scrollbar
       can reach it. That is correct while the container scrolls natively.

       Once Panzoom owns navigation that trade stops applying — overflow is
       hidden, there is no scrollbar to strand, and dragging reaches every
       edge. What the bail-out costs instead is the centring itself, and it
       costs it twice over:

         1. transform: scale() does not change layout size. The canvas still
            measures its full max-content width (2048px at a 1905px viewport),
            so it always counts as overflowing and `safe` always bails, even
            when the SCALED chart would fit with room to spare.
         2. transform-origin is 50% 0, so the chart shrinks toward the canvas
            centre. Pinned at flex-start that centre sits at naturalWidth / 2
            rather than at the viewport's centre, and the difference lands on
            screen as dead space on the left — 307px at scale 0.7.

       Plain `center` puts the canvas centre on the viewport centre, which is
       exactly the point transform-origin scales around. The chart is then
       centred at EVERY scale, with no pan correction to keep in sync. */
    justify-content: center;
}

#main-content .atm-org-page .atm-org__viewport.is-panning {
    cursor: grabbing;
}

/* Set by the static-fit path in js/autoridades-chart.js, which runs when the
   vendored Panzoom build turns out not to apply a transform. The script adds
   this class ONLY while the scaled chart fits, so centring can never strand
   the left edge behind a scroll origin — below that it takes the class off
   and `safe center` plus the native scrollbar take over. Same trade as
   .is-pannable above, decided per state rather than per mode. */
#main-content .atm-org-page .atm-org__viewport.is-fitted {
    justify-content: center;
}

@media (prefers-reduced-motion: no-preference) {
    #main-content .atm-org-page .atm-org__control {
        transition: background-color 160ms ease, border-color 160ms ease;
    }
}

/* ========================================================================
   DISCLOSURE — native <details>/<summary>, no role="tree"
   ======================================================================== */
#main-content .atm-org-page .atm-org__details {
    margin-top: var(--org-space-md);
}

#main-content .atm-org-page .atm-org__toggle {
    display: flex;
    align-items: center;
    gap: var(--org-space-2xs);
    list-style: none;
    cursor: pointer;
    padding: var(--org-space-xs) 0;
    font-size: var(--org-text-sm);
    font-weight: 600;
    color: var(--org-accent);
    border-top: 1px solid var(--org-line);
}

#main-content .atm-org-page .atm-org__toggle::-webkit-details-marker {
    display: none;
}

/* Chevron affordance replacing the removed native marker. */
#main-content .atm-org-page .atm-org__toggle::after {
    content: "\25BE";
    margin-left: auto;
}

#main-content .atm-org-page .atm-org__details[open] > .atm-org__toggle::after {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: no-preference) {
    #main-content .atm-org-page .atm-org__toggle::after {
        transition: transform 180ms ease;
    }
}

#main-content .atm-org-page .atm-org__toggle-count {
    color: var(--org-ink-muted);
    font-weight: 400;
}

/* !important reason 2: list padding, set by Divi with its own !important. */
#main-content .atm-org-page .atm-org__area-list {
    padding-top: var(--org-space-xs) !important;
}

#main-content .atm-org-page .atm-org__area-list li {
    padding: var(--org-space-2xs) 0;
    font-size: var(--org-text-sm);
    color: var(--org-ink-soft);
    border-bottom: 1px dashed var(--org-line);
}

#main-content .atm-org-page .atm-org__area-list li:last-child {
    border-bottom: none;
}

/* Mirrors the gap the source organigrama draws before Patrimonio y Compras.
   A space and a firmer rule, deliberately nothing more: no colour, no label,
   no icon. Those would all be claims about a grouping nobody has explained
   yet, and an official register is the wrong place to guess. */
#main-content .atm-org-page .atm-org__area--group-start {
    margin-top: var(--org-space-sm);
    padding-top: var(--org-space-sm);
    border-top: 1px solid var(--org-line-strong);
}

/* ========================================================================
   DOCUMENT
   ======================================================================== */
#main-content .atm-org-page .atm-org__document h2 {
    color: var(--org-brand-deep);
}

/* !important reason 2: paragraph spacing, set by Divi with its own !important. */
#main-content .atm-org-page .atm-org__version {
    color: var(--org-ink-soft);
    margin-bottom: var(--org-space-md) !important;
}

#main-content .atm-org-page .atm-org__pdf-link a {
    display: inline-block;
    background: var(--org-brand);
    color: #ffffff;
    font-weight: 600;
    padding: var(--org-space-sm) var(--org-space-lg);
    border-radius: var(--org-radius-sm);
    text-decoration: none;
}

#main-content .atm-org-page .atm-org__pdf-link a:hover {
    background: var(--org-brand-crimson);
}

/* ========================================================================
   EMPTY STATE
   ======================================================================== */
#main-content .atm-org-page .atm-org__empty-notice {
    background: var(--org-surface-alt);
    border: 1px solid var(--org-line);
    border-radius: var(--org-radius);
    padding: var(--org-space-lg);
    color: var(--org-ink-soft);
}

/* ========================================================================
   ACCESSIBILITY
   ======================================================================== */

/* Extends the visible "Ver áreas" label rather than replacing it (would be
   the effect of aria-label), so SC 2.5.3 Label in Name holds: the visible
   string stays a substring of the accessible name. */
#main-content .atm-org-page .atm-org__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* !important reason 3: Divi resets outlines inside #main-content, and losing
   the visible focus indicator is a WCAG 2.4.7 failure. Ring colour cleared
   for 3:1 against both the card and the page surfaces. */
#main-content .atm-org-page summary:focus-visible,
#main-content .atm-org-page a:focus-visible {
    outline: 3px solid var(--org-focus) !important;
    outline-offset: 3px;
    border-radius: var(--org-radius-sm);
}

/* ========================================================================
   RESPONSIVE — breakpoints match medios-pago.css
   ======================================================================== */
@media (max-width: 900px) {
    .atm-org-page {
        --org-text-2xl: 1.5rem;
        --org-text-xl: 1.25rem;
        --org-space-2xl: 2rem;
    }
}

@media (max-width: 560px) {
    .atm-org-page {
        --org-space-lg: 1.25rem;
        --org-space-2xl: 1.5rem;
    }
}

/* ========================================================================
   PRINT — every <details> forced open so all 30 nodes are visible
   ======================================================================== */
@media print {
    /* !important reason 4: the UA style for a closed <details> is itself
       highly specific, so forcing it open on paper needs to outrank it. */
    #main-content .atm-org-page details:not([open]) > *:not(summary) {
        display: block !important;
    }

    #main-content .atm-org-page summary {
        list-style: none;
    }

    #main-content .atm-org-page summary::-webkit-details-marker {
        display: none;
    }

    #main-content .atm-org-page .atm-org__toggle::after {
        content: none;
    }

    #main-content .atm-org-page .atm-org__node {
        break-inside: avoid;
    }

    /* Paper has no viewport to pan. Undo the whole chart apparatus: drop the
       controls, release the scroll container, and — the one that actually
       bites — clear any transform Panzoom left on the canvas, or the sheet
       prints whatever zoom and offset the reader happened to leave behind.
       !important reason 4: the transform is an inline style set by the
       library, and only !important outranks that.
       The stacked layout is what prints, at every width. */
    #main-content .atm-org-page .atm-org__controls {
        display: none;
    }

    #main-content .atm-org-page .atm-org__viewport {
        overflow: visible !important;
        /* The wash is screen atmosphere; on paper it wastes toner and can
           band badly on laser printers. */
        background: none;
    }

    /* Glass is a screen effect twice over: blur needs a compositor and the
       tint needs the wash. On paper the cards fall back to the same
       ink-on-white the --fill reset below produces, plus their border so
       they still read as boxes. */
    #main-content .atm-org-page .atm-org__node--dir,
    #main-content .atm-org-page .atm-org__node--despacho {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: none;
        box-shadow: none;
        border-color: #000000;
    }

    #main-content .atm-org-page .atm-org__node--lead,
    #main-content .atm-org-page .atm-org__node--sublead {
        box-shadow: none;
    }

    #main-content .atm-org-page .atm-org__canvas {
        transform: none !important;
        min-width: 0;
        display: block;
        padding: 0;
    }

    #main-content .atm-org-page .atm-org__branches {
        flex-direction: column;
    }

    #main-content .atm-org-page .atm-org__node {
        width: auto;
    }

    /* A despacho is positioned out of flow on the screen tree. Paper has no
       stage to position against, and an absolutely placed card there would
       either overlap the leadership card or fall off the sheet, so it goes
       back into normal flow underneath the card it belongs to.
       Stated explicitly rather than left to the breakpoint: print usually
       lays out narrower than 64rem and would miss the tree rules anyway, but
       "usually" is not something a printed page should depend on — landscape
       and large paper sizes do reach it. */
    #main-content .atm-org-page .atm-org__aides {
        position: static;
        transform: none;
        margin-left: 0;
        margin-top: var(--org-space-md) !important;
    }

    /* Connectors are screen scaffolding; on paper the indentation and the
       headings already carry the hierarchy, and printed hairlines mostly
       come out as artefacts. */
    #main-content .atm-org-page .atm-org__node::before,
    #main-content .atm-org-page .atm-org__branch::before,
    #main-content .atm-org-page .atm-org__branch::after,
    #main-content .atm-org-page .atm-org__aide::before,
    #main-content .atm-org-page .atm-org__spine::before,
    #main-content .atm-org-page .atm-org__branches::before {
        display: none;
    }

    /* The label is only hidden on the screen tree; paper needs it back. */
    #main-content .atm-org-page .atm-org__section-label {
        position: static;
        width: auto;
        height: auto;
        clip-path: none;
    }

    /* Strips every filled surface to ink on white: one reset, because the
       fill system is one class. Every rank (lead, sublead, dir, despacho)
       carries .atm-org__node--fill, so this single block undoes all four. */
    #main-content .atm-org-page .atm-org__node--fill {
        background: none;
        color: #000000;
        --org-ink: #000000;
        --org-ink-soft: #000000;
        --org-ink-muted: #000000;
        --org-line: #000000;
        --org-line-strong: #000000;
        --org-accent: #000000;
        --org-focus: var(--org-brand-crimson);
    }

    /* The fill is gone, so every node needs its own border to still read as
       a box rather than loose text — including the Dirección card, whose
       screen border C2 removed once the fill made it redundant there. */
    #main-content .atm-org-page .atm-org__node {
        border: 1px solid #000000;
    }

    #main-content .atm-org-page .atm-org__pdf-link a {
        background: none;
        color: #000000;
        padding: 0;
    }

    #main-content .atm-org-page .atm-org__pdf-link a[href]::after {
        content: " (" attr(href) ")";
    }
}