/*
 * LSA Event Management: visual system (public portal and internal portal).
 * Contract: docs/architecture/ui-design-system.md. Class names are stable; add, never rename.
 * Strict CSP (style-src 'self'): no inline styles anywhere, every style lives in a stylesheet.
 * Accessibility: WCAG AA contrast. The prototype gold (#d6ae62) is never used for text on light backgrounds:
 * use --color-gold-strong instead. Every interactive element has a visible focus outline.
 */

/* ------------------------------------------------------------------ */
/* Tokens                                                              */
/* ------------------------------------------------------------------ */
:root {
    --color-ink: #171717;
    --color-black: #080808;
    --color-black-soft: #151515;
    --color-surface: #ffffff;
    --color-canvas: #f6f4ef;
    --color-line: #e5e0d6;
    --color-line-strong: #8c8577;
    --color-muted: #6e695f;
    --color-on-dark: #f4f1ea;
    --color-on-dark-muted: #c9c3b6;
    --color-on-dark-caption: #c8c2b7;
    --color-on-dark-subtle: #aaa49a;
    --color-black-line: #222222;
    --color-gold: #d6ae62;
    --color-gold-light: #f1dfb5;
    --color-gold-strong: #6f5522;
    --color-gold-soft: #faf3e3;
    --color-success: #2f654b;
    --color-success-soft: #edf5f0;
    --color-warning: #795c22;
    --color-warning-soft: #faf3e5;
    --color-danger: #823c3c;
    --color-danger-soft: #faeeee;
    --color-info: #365f75;
    --color-info-soft: #edf3f7;

    --font-sans: Inter, "Segoe UI", Roboto, Arial, sans-serif;
    --font-mono: "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, "Liberation Mono", monospace;
    /* Type ramp (V2.2, P2-A; Fluent 2 "type ramp"): 11 px is the absolute minimum (labels, badges, captions); reading text
       is 12 px or more (DIS-14). Sizes are rem so browser zoom and text resizing scale them (WCAG 1.4.4). */
    --text-2xs: 0.6875rem;
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.9375rem;
    --text-md: 1.0625rem;
    --text-lg: 1.25rem;
    --text-xl: 1.625rem;
    --text-2xl: 2.25rem;
    --leading: 1.55;
    --leading-tight: 1.2;
    --leading-snug: 1.4;

    /* 4-point spacing scale: 4, 8, 12, 16, 24, 32, 48, 64 px. */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    /* Radii: the generic ones (sm/md/lg) and the named radii of the prototype v6.1 components. */
    --radius-xs: 7px;
    --radius-sm: 8px;
    --radius-control: 9px;
    --radius-md: 12px;
    --radius-panel: 13px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* Three elevation levels: flat (internal panels), resting card, raised surface (sign-in card, dialog). */
    --elevation-0: none;
    --elevation-1: 0 8px 28px rgba(0, 0, 0, 0.035);
    --elevation-2: 0 18px 50px rgba(0, 0, 0, 0.08);
    --shadow-card: var(--elevation-1);
    --shadow-raised: var(--elevation-2);

    /* Motion: short, functional transitions only (state changes); prefers-reduced-motion removes them (see the end). */
    --motion-fast: 120ms;
    --motion-base: 180ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);

    /* Focus (A11Y-01; WCAG 2.4.7, guidance of 2.4.13): ONE recipe everywhere, a 3 px outline 2 px away from the element in
       the accessible gold (7:1 on white); on dark surfaces only its colour changes. */
    --focus-color: var(--color-gold-strong);
    --focus-color-on-dark: var(--color-gold);
    --focus-width: 3px;
    --focus-offset: 2px;
    --focus-outline: var(--focus-width) solid var(--focus-color);
    /* Former halo of buttons and controls: kept as a token (public form stylesheet), no longer part of the focus recipe. */
    --focus-ring: 0 0 0 4px rgba(214, 174, 98, 0.45);

    --control-height: 44px;
    --container-width: 72rem;
    --container-narrow-width: 46rem;
    --sidebar-width: 16rem;
    /* Prototype ".wrap": public header, footer and page-header band text. */
    --wrap-width: 1420px;
    --wrap-gutter: 48px;
    --wrap-gutter-narrow: 30px;

    /* Internal portal shell (prototype admin view, ".admin", ".side", ".top", ".ac"). */
    --internal-sidebar-width: 248px;
    --internal-rail-width: 76px;
    --internal-topbar-height: 58px;
    --internal-main-width: 1600px;
    --internal-gutter: 25px;
    --color-internal-canvas: #f7f5f1;
    --color-sidebar: #0c0c0c;
    --color-sidebar-line: #222222;
    --color-sidebar-hover: #181818;
    /* 6.5:1 on the sidebar. */
    --color-sidebar-link: #99948b;
    /* Dense tables of the internal portal (prototype ".table"). */
    --color-table-head: #fbfaf8;
    --color-table-line: #eeeae3;
    --color-table-hover: #fcfaf6;
    /* Neutral status (prototype ".gray"): 5.3:1 on its background. */
    --color-neutral: #65615a;
    --color-neutral-soft: #f1efeb;
}

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading);
    color: var(--color-ink);
    background: var(--color-canvas);
}

h1,
h2,
h3,
h4 {
    margin: 0 0 var(--space-3);
    line-height: 1.25;
    font-weight: 700;
    color: var(--color-ink);
}

h1 {
    font-size: var(--text-xl);
    letter-spacing: -0.01em;
}

h2 {
    font-size: var(--text-lg);
}

h3 {
    font-size: var(--text-md);
}

h4 {
    font-size: var(--text-base);
}

p,
ul,
ol,
dl,
table,
fieldset {
    margin: 0 0 var(--space-4);
}

ul,
ol {
    padding-left: var(--space-5);
}

li + li {
    margin-top: var(--space-1);
}

a {
    color: var(--color-gold-strong);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

a:hover {
    color: var(--color-ink);
}

strong {
    font-weight: 700;
}

code,
kbd {
    font-family: var(--font-mono);
    font-size: 0.95em;
}

img,
svg {
    max-width: 100%;
}

fieldset {
    min-width: 0;
    padding: 0;
    border: 0;
}

legend {
    padding: 0;
}

hr {
    border: 0;
    border-top: 1px solid var(--color-line);
    margin: var(--space-5) 0;
}

:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
}

main[tabindex="-1"]:focus {
    outline: none;
}

::selection {
    background: var(--color-gold-light);
    color: var(--color-ink);
}

/* ------------------------------------------------------------------ */
/* Structure and utilities                                             */
/* ------------------------------------------------------------------ */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--space-5);
}

/* Prototype ".wrap": min(1420px, 100% - 48px); min(100% - 30px, 1420px) below 720px. */
.site-wrap {
    width: min(var(--wrap-width), calc(100% - var(--wrap-gutter)));
    margin-inline: auto;
}

.container--narrow {
    max-width: var(--container-narrow-width);
}

/* Full-bleed main area (PublicLayout.FullBleed): the page sets its own width from 100 % of it. */
.container--bleed,
.container.container--bleed {
    max-width: none;
    padding-inline: 0;
}

.container .container {
    padding-inline: 0;
}

.section {
    padding-block: var(--space-6);
}

.stack > * {
    margin-top: 0;
    margin-bottom: 0;
}

.stack > * + * {
    margin-top: var(--space-4);
}

.cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.grid {
    display: grid;
    gap: var(--space-5);
}

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

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

.skip-link {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    z-index: 100;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--color-gold);
    color: var(--color-ink);
    font-weight: 700;
    text-decoration: none;
    transform: translateY(-200%);
}

.skip-link:focus,
.skip-link:focus-visible {
    transform: none;
    outline: var(--focus-width) solid var(--color-ink);
    outline-offset: var(--focus-offset);
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.text-muted {
    color: var(--color-muted);
}

.text-small {
    font-size: var(--text-sm);
}

.group-title {
    margin: 0 0 var(--space-3);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-gold-strong);
}

.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.page-header__title {
    margin: 0;
}

.page-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* ------------------------------------------------------------------ */
/* Public portal                                                       */
/* ------------------------------------------------------------------ */
/* Prototype v6.1 header: black 72px band, logo, thin divider, caption and a compact navigation. */
.site-body {
    display: flex;
    flex-direction: column;
}

.site-header {
    /* Above the page-header band: the 150px logo (85px tall) overflows the 72px band, as in the prototype. */
    position: relative;
    z-index: 2;
    background: var(--color-black);
    color: var(--color-on-dark);
    border-bottom: 1px solid var(--color-black-line);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    /* 72px band including its 1px bottom border. */
    height: 71px;
}

.site-header__brand {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    color: var(--color-on-dark);
    text-decoration: none;
}

/* OBSOLETA (hallazgo Q-21): ninguna vista la usa desde el cambio de logotipo; se conserva por contrato
   (ui-design-system.md, "Clases obsoletas"). No usar en vistas nuevas. */
.site-header__brand-mark {
    color: var(--color-gold);
    letter-spacing: 0.06em;
}

.site-header__logo {
    display: block;
    width: 150px;
    height: auto;
}

.site-header__divider {
    display: block;
    width: 1px;
    height: 30px;
    background: #353535;
}

.site-header__caption {
    color: var(--color-on-dark-caption);
    font-size: var(--text-sm);
}

.site-header__brand:hover .site-header__caption {
    color: var(--color-gold-light);
}

.site-nav ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav li + li {
    margin-top: 0;
}

.site-nav a {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 14px;
    border-radius: 9px;
    color: var(--color-on-dark-caption);
    font-weight: 650;
    text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
    background: var(--color-ink);
    color: var(--color-gold-light);
}

.site-header :focus-visible,
.site-footer :focus-visible,
.page-hero :focus-visible,
.internal-sidebar :focus-visible,
.auth-header :focus-visible {
    outline-color: var(--focus-color-on-dark);
}

.site-main {
    /* Containing block of absolutely positioned descendants (for example visually hidden text inside a horizontally
       scrolling list), so that the horizontal clip below also applies to them. */
    position: relative;
    flex: 1 0 auto;
    padding-block: var(--space-6) var(--space-7);
    /* The page-header band bleeds to the viewport edges; clip the scrollbar-width overflow it may cause. */
    overflow-x: hidden;
    overflow-x: clip;
}

/* Footer aligned with LSA's main website: legal warning band, brand block, link columns and copyright line. */
.site-footer {
    background: var(--color-black);
    color: var(--color-on-dark-muted);
    font-size: var(--text-sm);
}

.site-footer__warning {
    background: var(--color-black-soft);
    border-bottom: 1px solid var(--color-black-line);
}

.site-footer__warning-inner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-block: var(--space-4);
}

.site-footer__warning-icon {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--color-gold);
    border-radius: 50%;
    color: var(--color-gold);
    font-weight: 800;
}

.site-footer__legend {
    margin: 0;
    color: var(--color-on-dark);
    font-weight: 600;
}

.site-footer__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr);
    gap: var(--space-6);
    padding-block: var(--space-6);
}

.site-footer__inner p {
    margin: 0;
}

.site-footer__logo {
    display: block;
    width: 140px;
    height: auto;
    margin-bottom: var(--space-4);
}

.site-footer__description {
    max-width: 38ch;
    color: var(--color-on-dark-subtle);
    line-height: 1.6;
}

.site-footer__links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
}

.site-footer__heading {
    margin: 0 0 var(--space-3);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-gold);
}

.site-footer__links ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__links li + li {
    margin-top: var(--space-2);
}

.site-footer a {
    color: var(--color-gold-light);
    font-weight: 600;
}

.site-footer a:hover {
    color: var(--color-surface);
}

.site-footer__bottom {
    padding-block: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-black-line);
}

.site-footer__name {
    margin: 0;
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    color: var(--color-on-dark-subtle);
}

/* Page-header band (prototype ".ph"). Inside the public layout it bleeds to the viewport edges, right under the header,
   while its text stays aligned with the page container. */
.page-hero {
    margin-bottom: var(--space-6);
    padding: var(--space-7) var(--space-6);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #090909 0%, #12110e 100%);
    color: var(--color-on-dark);
    box-shadow: var(--shadow-raised);
}

.site-main > .container > .page-hero:first-child {
    margin-top: calc(-1 * var(--space-6));
    margin-inline: calc(50% - 50vw);
    /* Text aligned with the header (prototype ".ph" > ".wrap"). */
    padding: 28px max(calc(var(--wrap-gutter) / 2), calc((100vw - var(--wrap-width)) / 2));
    border-bottom: 1px solid var(--color-black-line);
    border-radius: 0;
    box-shadow: none;
    /* Prototype ".ph": the browser's normal line height for eyebrow, title and lead. */
    line-height: normal;
}

.site-main > .container > .page-hero:first-child .page-hero__title {
    line-height: inherit;
}

.page-hero > :last-child {
    margin-bottom: 0;
}

.page-hero__eyebrow {
    margin: 0;
    font-size: var(--text-2xs);
    font-weight: 850;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-gold);
}

.page-hero__title {
    max-width: 40ch;
    margin: 7px 0;
    font-size: 1.75rem;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--color-surface);
}

.page-hero__lead {
    max-width: 70ch;
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-on-dark-subtle);
}

.page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.page-hero a:not(.btn) {
    color: var(--color-gold-light);
}

/* ------------------------------------------------------------------ */
/* Internal portal                                                     */
/* ------------------------------------------------------------------ */
/* Signed-in shell (prototype v6.1 admin view): 248px dark sidebar, sticky 58px white top bar and a centered main area of
   at most 1600px on the warm canvas. The page <header> holds the sidebar AND the top bar (brand, navigation, account and
   the only form of the layout, sign-out); it spans the whole grid as a subgrid so its two parts sit in their own cells.
   1050px or less: 76px icon rail (labels visually hidden, never display:none). Below 720px: top navigation (no JS). */
.internal-body {
    background: var(--color-internal-canvas);
}

/* Anchor jumps (detail sections, error summaries) never end under the sticky top bar. */
html:has(.internal-body) {
    scroll-padding-top: calc(var(--internal-topbar-height) + var(--space-3));
}

.internal-shell {
    display: grid;
    --internal-column: var(--internal-sidebar-width);
    grid-template-columns: var(--internal-column) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 100vh;
    /* The sidebar column stays dark below the (sticky, viewport-tall) sidebar on long pages. */
    background:
        linear-gradient(to right, var(--color-sidebar) calc(var(--internal-column) - 1px), var(--color-sidebar-line) 0,
            var(--color-sidebar-line) var(--internal-column), var(--color-internal-canvas) 0);
}

.internal-shell > header {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    /* The header box spans the grid; only its children (sidebar and top bar) take clicks. */
    pointer-events: none;
}

.internal-shell > header > * {
    pointer-events: auto;
}

.internal-sidebar {
    position: sticky;
    top: 0;
    display: flex;
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: start;
    flex-direction: column;
    height: 100vh;
    overflow-y: auto;
    background: var(--color-sidebar);
    border-right: 1px solid var(--color-sidebar-line);
    color: #dddddd;
}

.internal-brand {
    display: block;
    padding: 0 var(--space-2);
    font-size: var(--text-md);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-gold);
}

/* Sidebar brand: the LSA logo (122px) in its own block; the "LSA de Colombia · Portal interno" text stays in the header
   for assistive technologies (visually hidden by the layout). */
.internal-brand-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: 21px 18px;
    border-bottom: 1px solid var(--color-sidebar-line);
}

.internal-brand__logo {
    display: block;
    width: 122px;
    height: auto;
}

.internal-brand-block .internal-brand {
    font-size: var(--text-sm);
}

/* V2.2 P4-A (DIS-04): navigation + profile inside a native disclosure (<details class="internal-menu">). Below 720px it is a
   collapsed "Menú" button; from 720px its summary is hidden and its content always shows. The content fills the sidebar so the
   profile box keeps its place at the bottom. Browsers without ::details-content (before 2025) keep the "Menú" button at every
   width: still usable, nothing is lost. */
.internal-menu {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
}

.internal-menu__toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-height);
    margin: 10px;
    padding: 0 14px;
    border: 1px solid #353535;
    border-radius: var(--radius-control);
    color: var(--color-on-dark);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
}

.internal-menu__toggle::-webkit-details-marker {
    display: none;
}

/* Decorative state glyph (empty text alternative): the summary already exposes expanded/collapsed to assistive technology. */
.internal-menu__toggle::before {
    content: "☰";
    content: "☰" / "";
    width: 1.25rem;
    font-size: 1rem;
    line-height: 1;
    text-align: center;
    color: var(--color-gold);
}

.internal-menu[open] > .internal-menu__toggle::before {
    content: "✕";
    content: "✕" / "";
}

.internal-menu__toggle:hover {
    border-color: var(--color-gold);
    background: var(--color-sidebar-hover);
    color: var(--color-gold-light);
}

.internal-menu--static > .internal-menu__toggle {
    display: none;
}

@supports selector(::details-content) {
    @media (min-width: 720px) {
        .internal-menu > .internal-menu__toggle {
            display: none;
        }

        .internal-menu::details-content {
            display: flex;
            flex: 1 0 auto;
            flex-direction: column;
            content-visibility: visible;
        }
    }
}

.internal-nav {
    padding: 14px 10px;
}

.internal-nav ul {
    display: grid;
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.internal-nav li + li {
    margin-top: 0;
}

/* Separator before the account items (prototype ".sep"). */
.internal-nav__item--account {
    margin-top: 8px;
    padding-top: 11px;
    border-top: 1px solid var(--color-sidebar-line);
}

.internal-nav a {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: var(--control-height);
    padding: 10px 11px;
    border-radius: 8px;
    color: var(--color-sidebar-link);
    font-weight: 650;
    line-height: 1.25;
    text-decoration: none;
}

.internal-nav a:hover,
.internal-nav a[aria-current="page"] {
    background: var(--color-sidebar-hover);
    color: var(--color-gold-light);
}

.internal-nav a[aria-current="page"] {
    box-shadow: inset 3px 0 0 var(--color-gold);
}

.internal-nav__icon {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 1.25rem;
    font-size: 1rem;
    line-height: 1;
}

.internal-account {
    margin-top: auto;
    padding: 14px;
    border-top: 1px solid var(--color-sidebar-line);
}

/* Profile box (prototype ".profile"): role names and the account e-mail of an MFA session. */
.internal-profile {
    padding: 10px;
    border: 1px solid #2a2a2a;
    border-radius: 9px;
}

.internal-profile__label {
    display: block;
    font-size: var(--text-2xs);
    color: var(--color-on-dark-subtle);
}

.internal-profile__roles {
    display: block;
    margin-top: 3px;
    font-size: var(--text-xs);
    font-weight: 700;
    color: #eeeeee;
}

.internal-account__email {
    display: block;
    margin-top: 3px;
    font-size: var(--text-xs);
    color: var(--color-on-dark-muted);
    /* UI21-06: an e-mail breaks only when it does not fit the line (never "anywhere"). */
    overflow-wrap: break-word;
    word-break: normal;
}

.internal-account form,
.internal-topbar form {
    margin: 0;
}

.internal-content {
    display: flex;
    grid-column: 2;
    grid-row: 2;
    flex-direction: column;
    min-width: 0;
}

.internal-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    grid-column: 2;
    grid-row: 1;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    min-width: 0;
    height: var(--internal-topbar-height);
    padding: 0 24px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-line);
}

.internal-topbar__context {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-size: var(--text-xs);
    color: var(--color-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.internal-topbar__title {
    font-weight: 700;
    color: var(--color-ink);
}

.internal-topbar__actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: 12px;
}

/* Prototype "btn white sm" (35px tall, 12px text); still a 24px+ target (WCAG 2.5.8). 44px on a coarse pointer (A11Y-02). */
.internal-topbar .btn {
    min-height: 35px;
    padding: 0 12px;
    font-size: var(--text-xs);
}

@media (pointer: coarse) {
    .internal-topbar .btn {
        min-height: var(--control-height);
    }
}

.internal-main {
    flex: 1 0 auto;
    width: 100%;
    max-width: var(--internal-main-width);
    margin-inline: auto;
    padding: var(--internal-gutter);
}

.internal-footer {
    padding: var(--space-4) var(--internal-gutter);
    font-size: var(--text-xs);
    color: var(--color-muted);
    border-top: 1px solid var(--color-line);
}

/* 1050px or less (and 720px or more): 76px icon rail. Labels, brand text and profile stay in the accessibility tree. */
@media (min-width: 720px) and (max-width: 1050px) {
    .internal-shell {
        --internal-column: var(--internal-rail-width);
    }

    .internal-brand-block {
        align-items: center;
        padding: 21px 10px;
    }

    .internal-brand__logo {
        width: 42px;
    }

    .internal-nav a {
        justify-content: center;
        padding: 10px 0;
    }

    .internal-nav__icon {
        width: auto;
        font-size: 1.125rem;
    }

    .internal-nav__label,
    .internal-account .internal-profile {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    .internal-account {
        padding: 0;
        border-top: 0;
    }
}

/* Internal account pages shown before sign-in (login, two-factor, invitation, password reset, access denied): prototype
   v6.1 split screen. Left: black panel with the logo and the portal presentation (the page <header>). Right: the form. */
.auth-body {
    background: #f7f5f1;
}

.auth-split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    min-height: 100vh;
}

.auth-split > header {
    display: flex;
}

.auth-header {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    padding: 58px;
    background: radial-gradient(circle at 20% 20%, rgba(214, 174, 98, 0.15), transparent 28%), var(--color-black);
    color: var(--color-on-dark);
}

/* Flex column like the prototype .lb: the margins of the title and the text add up (they do not collapse). */
.auth-header__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 570px;
}

.auth-header__logo {
    display: block;
    width: 175px;
    height: auto;
    margin-bottom: 38px;
}

.auth-header .internal-brand {
    padding: 0;
}

.auth-header__eyebrow,
.auth-panel__eyebrow {
    margin: 0;
    font-size: var(--text-2xs);
    font-weight: 850;
    line-height: normal;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-gold);
}

.auth-header__title {
    max-width: 570px;
    margin: 10px 0 15px;
    font-size: 2.6875rem;
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.04em;
    color: var(--color-surface);
}

.auth-header__text {
    max-width: 530px;
    margin: 15px 0;
    line-height: 1.65;
    color: var(--color-on-dark-subtle);
}

.auth-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.auth-main {
    display: flex;
    flex: 1 0 auto;
    align-items: center;
    justify-content: center;
    padding: 36px;
}

.auth-panel {
    width: min(500px, 100%);
}

.auth-panel__eyebrow {
    color: var(--color-gold-strong);
}

/* Prototype ".roles": eyebrow, 22.5px heading, ".hint" text and 11px-radius white boxes without shadow. */
.auth-panel__title {
    margin: 18px 0;
    font-size: 1.40625rem;
    line-height: normal;
}

.auth-panel__hint {
    margin: 0 0 15px;
    font-size: var(--text-2xs);
    line-height: 1.45;
    color: var(--color-muted);
}

.auth-panel .card {
    border-radius: 11px;
    box-shadow: none;
}

.auth-panel > .alert {
    margin-bottom: var(--space-4);
}

.auth-panel__links {
    margin-top: var(--space-4);
    font-size: var(--text-sm);
}

.auth-panel__links p {
    margin: 0;
}

.auth-panel__links p + p {
    margin-top: var(--space-2);
}

.auth-footer {
    padding: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-muted);
    text-align: center;
}

/* ------------------------------------------------------------------ */
/* Cards                                                               */
/* ------------------------------------------------------------------ */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.card + .card,
.card + .grid,
.grid + .card {
    margin-top: var(--space-5);
}

.grid > .card + .card {
    margin-top: 0;
}

.card__header {
    padding: var(--space-5) var(--space-5) 0;
}

.card__title {
    margin: 0 0 var(--space-1);
    font-size: var(--text-lg);
}

.card__subtitle {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-muted);
}

.card__body {
    padding: var(--space-5);
}

.card__body > :last-child {
    margin-bottom: 0;
}

.card__footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-line);
    background: var(--color-canvas);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.card--raised {
    box-shadow: var(--shadow-raised);
}

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--control-height);
    padding: 0 17px;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    font: inherit;
    font-weight: 750;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard),
        color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
}

/* A11Y-01: buttons use the global focus outline, no extra halo. */
.btn:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
}

/* P2-B: a disabled button keeps its colours at reduced opacity and reacts to nothing (no hover or pressed change). */
.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.btn--primary {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-ink);
}

.btn--primary:hover {
    background: #c99d4c;
    border-color: #c99d4c;
    color: var(--color-ink);
}

.btn--dark {
    background: var(--color-black);
    border-color: var(--color-black);
    color: var(--color-surface);
}

.btn--dark:hover {
    background: var(--color-black-soft);
    color: var(--color-gold-light);
}

.btn--secondary {
    background: var(--color-surface);
    border-color: var(--color-line-strong);
    color: var(--color-ink);
}

.btn--secondary:hover {
    background: var(--color-gold-soft);
    border-color: var(--color-gold-strong);
    color: var(--color-ink);
}

.btn--danger {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: var(--color-surface);
}

.btn--danger:hover {
    background: #6b3030;
    color: var(--color-surface);
}

.btn--success {
    background: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-surface);
}

.btn--success:hover {
    background: #24503b;
    color: var(--color-surface);
}

/* Light outline button for dark surfaces (hero, internal sidebar). */
.btn--ghost {
    background: transparent;
    border-color: rgba(244, 241, 234, 0.55);
    color: var(--color-on-dark);
}

.btn--ghost:hover {
    background: rgba(244, 241, 234, 0.08);
    border-color: var(--color-gold);
    color: var(--color-gold-light);
}

.btn--small {
    min-height: 36px;
    padding: 0 var(--space-3);
    font-size: var(--text-sm);
}

/* P2-B: pressed state, one step darker than the hover state of each variant (never the only cue: the label does not change). */
.btn--primary:active {
    background: #b98f40;
    border-color: #b98f40;
}

.btn--dark:active {
    background: #262626;
}

.btn--secondary:active {
    background: var(--color-gold-light);
}

.btn--danger:active {
    background: #5a2828;
}

.btn--success:active {
    background: #1d4231;
}

.btn--ghost:active {
    background: rgba(244, 241, 234, 0.16);
}

/* A11Y-02 (WCAG 2.5.8; 44 px recommended for touch): on a coarse pointer every small button reaches the full control height. */
@media (pointer: coarse) {
    .btn--small {
        min-height: var(--control-height);
    }
}

.btn--block {
    width: 100%;
}

.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* ------------------------------------------------------------------ */
/* Forms                                                               */
/* ------------------------------------------------------------------ */
.form-section {
    margin: 0 0 var(--space-5);
    padding: var(--space-5);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    min-width: 0;
}

.form-section__title {
    float: left;
    width: 100%;
    margin: 0 0 var(--space-4);
    padding: 0;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-gold-strong);
}

.form-section__title + * {
    clear: both;
}

.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
}

.field__label {
    font-weight: 600;
    color: var(--color-ink);
}

.field__required {
    margin-left: var(--space-1);
    color: var(--color-danger);
    font-weight: 700;
}

.field__hint {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-muted);
}

.field__error,
.field-validation-error {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-danger);
}

.field-validation-valid {
    display: none;
}

.input,
.field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.field select,
.field textarea {
    display: block;
    width: 100%;
    min-height: var(--control-height);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-ink);
    font: inherit;
    line-height: 1.4;
}

.field textarea,
textarea.input {
    min-height: 7.5rem;
    resize: vertical;
}

.field input[type="file"],
input[type="file"].input {
    padding: var(--space-2);
}

/* P2-B: one chevron for every single-choice select (the native arrow differs per browser). The SVG is a data: image, which the
   CSP allows (img-src 'self' data:); it is base64 so the stylesheet holds no URL-like text (a 12x8 chevron stroked #4f4b44,
   8.5:1 on white). background-image only: the error state still sets its own background colour. */
select.input:not([multiple]):not([size]),
.field select:not([multiple]):not([size]) {
    appearance: none;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSI4IiB2aWV3Qm94PSIwIDAgMTIgOCI+PHBhdGggZD0iTTEgMS41bDUgNSA1LTUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzRmNGI0NCIgc3Ryb2tlLXdpZHRoPSIxLjc1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px 8px;
}

/* Windows high contrast and other forced-colour modes: the system arrow, which follows the user's colours. */
@media (forced-colors: active) {
    select.input:not([multiple]):not([size]),
    .field select:not([multiple]):not([size]) {
        appearance: auto;
        background-image: none;
    }
}

/* P2-B: native check boxes, radio buttons and range controls in the accessible gold everywhere (inherited property). */
body {
    accent-color: var(--color-gold-strong);
}

/* P1-D (internal part, DIS-10): the file selector button of internal upload forms looks like the secondary button, 44 px tall.
   Its label is the browser's own text (CSS cannot change it). The public upload zone has its own rules (submission-form.css,
   lookup.css). */
.internal-main input[type="file"] {
    max-width: 100%;
    font-size: var(--text-sm);
    cursor: pointer;
}

.internal-main input[type="file"]::file-selector-button {
    min-height: var(--control-height);
    margin-right: var(--space-3);
    padding: 0 var(--space-4);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    font: inherit;
    font-weight: 750;
    color: var(--color-ink);
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
}

.internal-main input[type="file"]:hover::file-selector-button {
    border-color: var(--color-gold-strong);
    background: var(--color-gold-soft);
}

.internal-main input[type="file"]:disabled::file-selector-button {
    cursor: not-allowed;
    opacity: 0.55;
}

/* DIS-08 (internal portal): "(obligatorio)" is information, not an error: secondary text colour, never red outside an error
   (the public form keeps its "*" marker, styled by submission-form.css). */
.internal-body .field__required {
    color: var(--color-muted);
    font-weight: 600;
}

/* P1-A (internal part; WCAG 1.4.1): an inline error also carries a non-chromatic mark, a decorative "!" disc with an empty text
   alternative (second declaration; browsers without that syntax keep the first one). Same mark as the public form. */
:is(.internal-body, .auth-body) .field__error:not(:empty),
:is(.internal-body, .auth-body) .field-validation-error:not(:empty) {
    position: relative;
    padding-left: 22px;
}

:is(.internal-body, .auth-body) .field__error:not(:empty)::before,
:is(.internal-body, .auth-body) .field-validation-error:not(:empty)::before {
    content: "!";
    content: "!" / "";
    position: absolute;
    top: 1px;
    left: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-danger);
    font-size: var(--text-2xs);
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    color: var(--color-surface);
}

/* A11Y-01: the same 3 px outline 2 px away as every other control (browsers match :focus-visible for text fields on every
   focus); the border also turns gold so the field keeps a cue inside the outline. */
.input:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
    border-color: var(--focus-color);
}

.input:disabled,
.field input:disabled,
.field select:disabled,
.field textarea:disabled {
    background: var(--color-canvas);
    color: var(--color-muted);
}

.input-validation-error,
[aria-invalid="true"] {
    border-color: var(--color-danger) !important;
    background-color: var(--color-danger-soft) !important;
}

.choice-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    padding: 0;
    list-style: none;
}

.choice-list li + li {
    margin-top: 0;
}

.choice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-height: var(--control-height);
    padding: var(--space-2) 0;
}

.choice input[type="checkbox"],
.choice input[type="radio"] {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0.1rem 0 0;
    accent-color: var(--color-gold-strong);
}

.choice label {
    cursor: pointer;
}

.choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: var(--space-3);
    margin: 0 0 var(--space-4);
    padding: 0;
    list-style: none;
}

.choice-grid li + li {
    margin-top: 0;
}

/* OBSOLETA (hallazgo Q-21): ninguna vista la usa (el formulario usa sus propias tarjetas); se conserva por contrato
   (ui-design-system.md, "Clases obsoletas"). No usar en vistas nuevas. */
.choice-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    height: 100%;
    padding: var(--space-4);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    cursor: pointer;
}

.choice-card input[type="checkbox"],
.choice-card input[type="radio"] {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0.1rem 0 0;
    accent-color: var(--color-gold-strong);
}

.choice-card:hover {
    border-color: var(--color-gold-strong);
}

.choice-card:has(input:checked) {
    border-color: var(--color-gold-strong);
    background: var(--color-gold-soft);
    box-shadow: inset 0 0 0 1px var(--color-gold-strong);
}

.choice-card:has(input:focus-visible) {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

/* Anti-bot field: kept out of view and of the accessibility tree by the view (aria-hidden, tabindex=-1). */
.honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* ------------------------------------------------------------------ */
/* Validation (classes generated by ASP.NET Core)                      */
/* ------------------------------------------------------------------ */
.validation-summary-valid {
    display: none;
}

.validation-summary,
.validation-summary-errors {
    margin-bottom: var(--space-4);
}

.validation-summary-errors {
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-danger);
    border-left-width: 4px;
    border-radius: var(--radius-sm);
    background: var(--color-danger-soft);
    color: var(--color-danger);
    font-weight: 600;
}

/* V2.3 P4 (D1, DIS-01 rest): ONE rule set for every error summary of both portals — the public form's GOV.UK summary
   (.submission-errors, styled box from .alert--danger) and the shared ones (.validation-summary, .validation-summary-errors).
   The public form stylesheet keeps only its spacing. */

/* P1-A / DIS-01: 18 px indent and a 24 px line, so a bullet and its 24 px link share one line box. */
.validation-summary ul,
.validation-summary-errors ul,
.submission-errors__list {
    margin: 0;
    padding-left: 18px;
    line-height: 24px;
}

/* The summary heading (public form; internal summaries with an .alert__title keep that class). */
.submission-errors__title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-base);
    font-weight: 800;
    line-height: 1.35;
    color: inherit;
}

/* The summary takes the focus after a failed POST or a blocked step (tabindex="-1"): a danger outline in both portals. */
.validation-summary:focus,
.validation-summary-errors:focus,
.submission-errors:focus {
    outline: var(--focus-width) solid var(--color-danger);
    outline-offset: var(--focus-offset);
}

/* UI21-02 (WCAG 2.2 2.5.8 Target Size): every link of an error summary is at least 24 px tall and stacked links keep a gap, so
   short adjacent messages ("Indique la fase.") are never undersized targets. Applies to every summary of both portals. */
.validation-summary li + li,
.validation-summary-errors li + li,
.submission-errors__list li + li {
    margin-top: var(--space-2);
}

/* DIS-01: vertical-align top keeps the bullet on the FIRST line of a link that wraps (an inline-block otherwise sits on the
   baseline of its last line). */
.validation-summary a,
.validation-summary-errors a,
.submission-errors a {
    display: inline-block;
    vertical-align: top;
    min-height: 24px;
    line-height: 24px;
    color: inherit;
    text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* Alerts                                                              */
/* ------------------------------------------------------------------ */
.alert {
    margin: 0 0 var(--space-4);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-line);
    border-left-width: 4px;
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-ink);
}

.alert > :last-child {
    margin-bottom: 0;
}

.alert__title {
    display: block;
    margin: 0 0 var(--space-1);
    font-size: var(--text-base);
    font-weight: 700;
}

.alert--info {
    border-color: var(--color-info);
    background: var(--color-info-soft);
}

.alert--info .alert__title {
    color: var(--color-info);
}

.alert--success {
    border-color: var(--color-success);
    background: var(--color-success-soft);
}

.alert--success .alert__title {
    color: var(--color-success);
}

.alert--warning {
    border-color: var(--color-warning);
    background: var(--color-warning-soft);
}

.alert--warning .alert__title {
    color: var(--color-warning);
}

.alert--danger {
    border-color: var(--color-danger);
    background: var(--color-danger-soft);
}

.alert--danger .alert__title {
    color: var(--color-danger);
}

/* V2.3 P4 (D1): notification banner (GOV.UK "Notification banner"; never a toast). The outcome of what the person just did,
   shown once at the top of the next page: role="alert", tabindex="-1" and the focus on load (form-feedback.js), so it is
   announced and the next Tab continues from it. A heavier accent than a static alert; the focus uses the global outline. */
.alert--notification {
    border-left-width: 6px;
}

.alert--notification .alert__title {
    font-size: var(--text-md);
}

.alert--notification:focus {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
}

/* ------------------------------------------------------------------ */
/* Form feedback (V2.3 P4, D1; wwwroot/js/form-feedback.js)            */
/* ------------------------------------------------------------------ */
/* [data-submit-once]: the button that sent the form says «Enviando…» and refuses a second activation. It stays focusable and
   enabled (aria-disabled, never disabled: the focus is not lost and its name/value is still sent); unlike a disabled button
   its text keeps the full contrast. The ring is decorative; with reduced motion it stops (global rule at the end). */
/* V2.3 P5 (P5U-09): the public «Enviar solicitud» (.submission-button, its own text logic in submission/form.js) shares the look. */
.btn.is-busy,
.submission-button.is-busy {
    opacity: 1;
    cursor: progress;
}

.btn.is-busy::before,
.submission-button.is-busy::before {
    content: "";
    flex: none;
    width: 0.9em;
    height: 0.9em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: lsa-busy-spin 0.8s linear infinite;
}

@keyframes lsa-busy-spin {
    to {
        transform: rotate(360deg);
    }
}

/* [data-character-count] (GOV.UK "Character count"): the visible count under the field is NOT a live region (it follows each
   keystroke); a visually hidden polite region repeats it once the person stops typing. */
.character-count__message {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
}

.character-count__message.is-limit {
    color: var(--color-ink);
    font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* COP amount field (V2.3 P4, D1; DIS-02 generalised)                  */
/* ------------------------------------------------------------------ */
/* Markup: <div class="money-field"><span class="money-field__affix" aria-hidden="true">$</span><input …>
   <span class="money-field__affix money-field__affix--end" aria-hidden="true">COP</span></div> and, after it,
   <p class="money-field__echo" data-money-echo="<input id>" hidden></p> (money-echo.js writes "$ 1.500.000"; static text, not a
   live region). The affixes are decorative: the hint says «pesos colombianos (COP)». The field keeps exactly what was typed. */
.money-field {
    position: relative;
}

.money-field .input,
.field .money-field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
    width: 100%;
    /* V2.3 review A11Y-D-10: em-based room for the affixes so text-only zoom never puts «COP» over the digits. */
    padding-right: calc(12px + 3.4em);
    padding-left: calc(12px + 1.1em);
    font-variant-numeric: tabular-nums;
}

.money-field__affix {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 12px;
    display: flex;
    align-items: center;
    font-weight: 700;
    color: var(--color-muted);
    pointer-events: none;
}

.money-field__affix--end {
    right: 12px;
    left: auto;
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
}

.money-field__echo {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: var(--leading-snug);
    color: var(--color-ink);
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ */
/* Sticky actions (V2.3 P4, D1) [DESVÍO v6.1]                          */
/* ------------------------------------------------------------------ */
/* The actions of a long form stay at the bottom of the viewport on phones (below 720 px) that are tall enough (560 px:
   otherwise the bar would cover too much of the page). WCAG 2.2 2.4.11 (Focus Not Obscured): the document reserves the
   bar's height as scroll padding, so a control that takes the focus is scrolled ABOVE the bar, never under it. Wider or
   shorter screens: the actions stay where they are in the flow.
   V2.3 P5 (P5U-01): a bar whose buttons wrap to two rows (internal action pages at 360/390 px) is taller than one control,
   so form-feedback.js measures the bar (ResizeObserver) and publishes its real height as --sticky-actions-height on the root
   element (CSSOM setProperty: allowed by the CSP style-src 'self'); without JavaScript the one-row height is reserved. */
@media (max-width: 719.98px) and (min-height: 560px) {
    html:has(.sticky-actions) {
        scroll-padding-bottom: calc(var(--sticky-actions-height, calc(var(--control-height) + 2 * var(--space-3))) + var(--space-4));
    }

    .sticky-actions {
        position: sticky;
        bottom: 0;
        z-index: 5;
        padding-block: var(--space-3);
        border-top: 1px solid var(--color-line);
        background: var(--color-surface);
        box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.06);
    }
}

/* ------------------------------------------------------------------ */
/* Badges                                                              */
/* ------------------------------------------------------------------ */
/* Prototype shape (public look; the internal shell restyles it in internal.css): radius 7px, padding 5x8, 11px bold,
   1px border and a 5px dot in the text colour. Text on its soft background: 5.3:1 (neutral) to 7.6:1 (danger).
   V2.3 P4 (D1; A11Y-C-01 generalised, WCAG 1.4.10 / 1.4.12): ONE behaviour in both portals — a badge never grows wider than
   its container and wraps its words inside (the dot stays on the first line); each portal keeps its prototype padding. */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 5px 8px;
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    font-size: var(--text-2xs);
    font-weight: 800;
    line-height: 1.3;
    text-align: start;
    white-space: normal;
    overflow-wrap: break-word;
    vertical-align: middle;
}

.badge::before {
    content: "";
    flex: none;
    align-self: flex-start;
    width: 5px;
    height: 5px;
    /* Centred on the first line of text (line-height 1.3 of 11 px ≈ 14 px). */
    margin-top: calc((1.3em - 5px) / 2);
    border-radius: 50%;
    background: currentColor;
}

.badge--success {
    background: var(--color-success-soft);
    border-color: #cfe0d6;
    color: var(--color-success);
}

.badge--warning {
    background: var(--color-warning-soft);
    border-color: #e8d8b7;
    color: var(--color-warning);
}

.badge--danger {
    background: var(--color-danger-soft);
    border-color: #eccfcf;
    color: var(--color-danger);
}

.badge--info {
    background: var(--color-info-soft);
    border-color: #d3e0e8;
    color: var(--color-info);
}

.badge--neutral {
    background: var(--color-neutral-soft);
    border-color: #ddd9d1;
    color: var(--color-neutral);
}

.badge--gold {
    background: var(--color-gold-soft);
    border-color: var(--color-gold-light);
    color: var(--color-gold-strong);
}

/* ------------------------------------------------------------------ */
/* Status and error pages (Views/Shared/StatusPage, static 429 pages)  */
/* ------------------------------------------------------------------ */
.status-page__code {
    margin: 0 0 var(--space-2);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-gold-strong);
}

.status-page__reference {
    font-size: var(--text-sm);
    color: var(--color-muted);
}

.status-page__reference code {
    font-family: var(--font-mono);
    color: var(--color-ink);
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ */
/* Data                                                                */
/* ------------------------------------------------------------------ */
.table-wrap {
    width: 100%;
    margin-bottom: var(--space-4);
    overflow-x: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: var(--text-base);
}

.table th,
.table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-line);
    text-align: left;
    vertical-align: middle;
}

.table thead th {
    background: var(--color-canvas);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
    white-space: nowrap;
}

.table tbody tr:last-child th,
.table tbody tr:last-child td {
    border-bottom: 0;
}

.table tbody tr:hover {
    background: var(--color-gold-soft);
}

.table__num {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}

.summary-list {
    display: grid;
    grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr);
    margin: 0 0 var(--space-4);
    border-top: 1px solid var(--color-line);
}

.summary-list dt,
.summary-list dd {
    margin: 0;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-line);
}

.summary-list dt {
    padding-right: var(--space-4);
    font-weight: 600;
    color: var(--color-muted);
}

.summary-list dd {
    overflow-wrap: anywhere;
}

.empty-state {
    padding: var(--space-7) var(--space-5);
    border: 1px dashed var(--color-line-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    text-align: center;
}

.empty-state__title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-md);
}

.empty-state__text {
    max-width: 48ch;
    margin: 0 auto;
    color: var(--color-muted);
}

/* V2.2 (DIS-18): the optional next step of an empty list (EmptyStateViewModel.ActionText / ActionUrl). */
.empty-state__actions {
    margin: var(--space-4) 0 0;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin: var(--space-5) 0;
}

.pagination__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--control-height);
    padding: 0 var(--space-4);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-ink);
    font-weight: 600;
    text-decoration: none;
}

a.pagination__link:hover {
    background: var(--color-gold-soft);
    border-color: var(--color-gold-strong);
}

.pagination__link.is-disabled {
    border-color: var(--color-line);
    color: var(--color-muted);
    cursor: default;
}

.pagination__status {
    font-weight: 600;
    color: var(--color-ink);
}

.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin: 0 0 var(--space-5);
    padding: 0;
    border-bottom: 1px solid var(--color-line);
    list-style: none;
}

.tabs li + li {
    margin-top: 0;
}

.tabs a {
    display: inline-flex;
    align-items: center;
    min-height: var(--control-height);
    padding: 0 var(--space-4);
    border-bottom: 3px solid transparent;
    color: var(--color-muted);
    font-weight: 600;
    text-decoration: none;
}

.tabs a:hover {
    color: var(--color-ink);
}

/* V2.3 P5 (P5U-04, WCAG 1.4.11) [DESVÍO v6.1]: the underline is the only non-text mark of the selected tab, so it uses
   --color-gold-strong (7.0:1 on white) instead of the prototype's --color-gold (2.08:1). */
.tabs a[aria-current="page"],
.tabs a[aria-selected="true"] {
    border-bottom-color: var(--color-gold-strong);
    color: var(--color-ink);
}

.timeline {
    position: relative;
    margin: 0 0 var(--space-4);
    padding: 0;
    list-style: none;
}

.timeline__item {
    position: relative;
    margin: 0;
    padding: 0 0 var(--space-5) var(--space-6);
}

.timeline__item + .timeline__item {
    margin-top: 0;
}

.timeline__item::before {
    content: "";
    position: absolute;
    top: 0.3rem;
    left: 0.3rem;
    width: 0.75rem;
    height: 0.75rem;
    border: 2px solid var(--color-line-strong);
    border-radius: 50%;
    background: var(--color-surface);
}

.timeline__item::after {
    content: "";
    position: absolute;
    top: 1.35rem;
    bottom: 0;
    left: calc(0.3rem + 5px);
    width: 2px;
    background: var(--color-line);
}

.timeline__item:last-child::after {
    display: none;
}

.timeline__item.is-done::before {
    border-color: var(--color-black);
    background: var(--color-black);
}

.timeline__item.is-current::before {
    border-color: var(--color-gold-strong);
    background: var(--color-gold);
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.kpi {
    padding: var(--space-5);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.kpi__label {
    margin: 0 0 var(--space-2);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.kpi__value {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.kpi__hint {
    margin: var(--space-1) 0 0;
    font-size: var(--text-sm);
    color: var(--color-muted);
}

/* ------------------------------------------------------------------ */
/* Steps                                                               */
/* ------------------------------------------------------------------ */
.stepper {
    display: grid;
    gap: var(--space-2);
    margin: 0 0 var(--space-5);
    padding: 0;
    list-style: none;
}

.stepper__step {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.stepper__step + .stepper__step {
    margin-top: 0;
}

.stepper__step.is-current {
    border-color: var(--color-gold);
    background: var(--color-gold-soft);
    box-shadow: inset 3px 0 0 var(--color-gold);
}

.stepper__number {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--color-line-strong);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-ink);
    font-size: var(--text-sm);
    font-weight: 700;
}

.stepper__step.is-current .stepper__number {
    border-color: var(--color-gold-strong);
    background: var(--color-gold);
    color: var(--color-ink);
}

.stepper__step.is-done .stepper__number {
    border-color: var(--color-black);
    background: var(--color-black);
    color: var(--color-gold-light);
}

.stepper__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.stepper__title {
    font-weight: 700;
    color: var(--color-ink);
}

.stepper__description {
    font-size: var(--text-sm);
    color: var(--color-muted);
}

/* OBSOLETA (hallazgo Q-21): _Stepper anuncia el estado con texto oculto; se conserva por contrato
   (ui-design-system.md, "Clases obsoletas"). No usar en vistas nuevas. */
.stepper__state {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-gold-strong);
}

.progress {
    display: block;
    width: 100%;
    height: 0.5rem;
    margin: 0 0 var(--space-4);
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-line);
    color: var(--color-gold);
    overflow: hidden;
    appearance: none;
}

.progress::-webkit-progress-bar {
    background: var(--color-line);
    border-radius: var(--radius-pill);
}

.progress::-webkit-progress-value {
    background: var(--color-gold);
    border-radius: var(--radius-pill);
}

.progress::-moz-progress-bar {
    background: var(--color-gold);
    border-radius: var(--radius-pill);
}

/* ------------------------------------------------------------------ */
/* Tracking number                                                     */
/* ------------------------------------------------------------------ */
.tracking-number {
    display: inline-block;
    padding: var(--space-3) var(--space-5);
    border: 1px solid var(--color-gold);
    border-radius: var(--radius-md);
    background: var(--color-gold-soft);
    color: var(--color-ink);
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: 0.08em;
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ */
/* Public home                                                         */
/* ------------------------------------------------------------------ */
.home-steps {
    margin: 0 0 var(--space-6);
    padding: 0;
    list-style: none;
}

.home-steps > li + li {
    margin-top: 0;
}

.home-steps .stepper__number {
    margin-bottom: var(--space-3);
    border-color: var(--color-black);
    background: var(--color-black);
    color: var(--color-gold-light);
}

/* ------------------------------------------------------------------ */
/* Responsive: one column below 720px                                  */
/* ------------------------------------------------------------------ */
@media (max-width: 719.98px) {
    .container {
        padding-inline: var(--space-4);
    }

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

    .page-hero {
        padding: var(--space-6) var(--space-5);
    }

    .site-main > .container > .page-hero:first-child {
        padding: 28px calc(var(--wrap-gutter-narrow) / 2);
    }

    .page-hero__title {
        font-size: var(--text-xl);
    }

    .site-main > .container > .page-hero:first-child .page-hero__title {
        font-size: 1.75rem;
    }

    .site-wrap {
        width: min(100% - var(--wrap-gutter-narrow), var(--wrap-width));
    }

    /* Same 72px band: the prototype's mobile header shows a single outlined button on the right. The link to the
       current section is hidden (the page already is that section) and the other one is outlined; outside both
       sections only "Consultar solicitud" remains (the home page and the confirmation offer "Nueva solicitud" in
       their own content, and the logo leads to the home page). */
    .site-header__inner {
        flex-wrap: wrap;
        gap: 0 12px;
        height: auto;
        min-height: 71px;
    }

    .site-nav ul:not(:has(a[aria-current="page"])) > li:first-child {
        display: none;
    }

    .site-header__logo {
        width: 108px;
    }

    .site-header__divider,
    .site-header__caption {
        display: none;
    }

    .site-nav li:has(> a[aria-current="page"]) {
        display: none;
    }

    .site-nav a {
        border: 1px solid #353535;
        color: #f4f0e8;
    }

    .site-footer__inner,
    .site-footer__links {
        grid-template-columns: minmax(0, 1fr);
    }

    .site-footer__warning-inner {
        align-items: flex-start;
    }

    .auth-split {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .auth-header {
        padding: 40px 24px;
    }

    /* The prototype keeps the 175px logo, the 43px title and the 36px padding of the form column on mobile. */

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

    .summary-list dt {
        padding-bottom: 0;
        border-bottom: 0;
    }

    /* The sidebar and the top bar become a top block: logo row with the "Menú" disclosure button on the right (P4-A, no
       JavaScript), the folded navigation and profile below it, then the static context bar. */
    .internal-shell {
        display: block;
        background: var(--color-internal-canvas);
    }

    html:has(.internal-body) {
        scroll-padding-top: 0;
    }

    .internal-shell > header {
        display: block;
        pointer-events: auto;
    }

    .internal-sidebar {
        /* Containing block of the "Menú" button, placed on the logo row. */
        position: relative;
        height: auto;
        overflow: visible;
        border-right: 0;
        border-bottom: 1px solid var(--color-sidebar-line);
    }

    .internal-brand-block {
        /* Logo row (96px logo, 82px tall): leaves room for the "Menú" button on the right. */
        min-height: 82px;
        padding: 14px 120px 14px 16px;
        border-bottom: 0;
    }

    .internal-brand__logo {
        width: 96px;
    }

    .internal-menu__toggle {
        position: absolute;
        top: 19px;
        right: 16px;
        margin: 0;
    }

    .internal-menu[open] {
        border-top: 1px solid var(--color-sidebar-line);
    }

    .internal-nav {
        padding: 10px 12px;
    }

    /* Open menu: two columns of 44px rows (one below 360px), active item with the gold inset of the desktop sidebar. */
    .internal-nav ul {
        grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
        gap: var(--space-1);
    }

    .internal-nav__item--account {
        grid-column: 1 / -1;
        margin-top: var(--space-1);
        padding-top: var(--space-2);
    }

    .internal-nav a {
        padding: 0 12px;
    }

    .internal-account {
        margin-top: 0;
        padding: 0 16px 14px;
        border-top: 0;
    }

    .internal-topbar {
        position: static;
        height: auto;
        min-height: var(--internal-topbar-height);
        padding: var(--space-2) 16px;
    }

    .internal-topbar__context {
        white-space: normal;
    }

    .internal-main {
        padding: 16px;
    }

    .internal-footer {
        padding-inline: 16px;
    }

    /* Steps scroll horizontally on narrow screens. */
    .stepper {
        display: flex;
        gap: var(--space-2);
        overflow-x: auto;
        padding-bottom: var(--space-2);
        scroll-snap-type: x proximity;
    }

    .stepper__step {
        flex: 0 0 auto;
        min-width: 13rem;
        scroll-snap-align: start;
    }

    .form-section {
        padding: var(--space-4);
    }

    .card__header {
        padding: var(--space-4) var(--space-4) 0;
    }

    .card__body {
        padding: var(--space-4);
    }

    .form-actions .btn {
        flex: 1 1 auto;
    }
}

/* ------------------------------------------------------------------ */
/* Reduced motion                                                      */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-fast: 0ms;
        --motion-base: 0ms;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

/* ------------------------------------------------------------------ */
/* Print                                                               */
/* ------------------------------------------------------------------ */
@media print {
    body {
        background: #fff;
        color: #000;
        font-size: 11pt;
    }

    .skip-link,
    .site-nav,
    .internal-nav,
    .internal-menu__toggle,
    .internal-account,
    .internal-topbar__actions,
    .pagination,
    .form-actions,
    .btn {
        display: none !important;
    }

    .site-header,
    .site-footer,
    .auth-header,
    .internal-sidebar,
    .page-hero {
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
        border-bottom: 1px solid #000;
    }

    .page-hero__title,
    .page-hero__lead,
    .page-hero__eyebrow,
    .site-header__brand,
    .site-header__brand-mark,
    .site-header__caption,
    .site-footer__legend,
    .site-footer__description,
    .site-footer__name,
    .auth-header__title,
    .auth-header__text,
    .internal-brand {
        color: #000 !important;
    }

    /* The logo is light gold on transparent: print it dark. */
    .site-header__logo,
    .site-footer__logo,
    .auth-header__logo,
    .internal-brand__logo {
        filter: brightness(0);
    }

    .site-footer__links {
        display: none;
    }

    .site-footer__warning {
        background: #fff !important;
    }

    .auth-split {
        display: block;
    }

    .auth-header {
        background: #fff !important;
        color: #000 !important;
        padding: 0 0 12pt;
    }

    .internal-shell,
    .internal-shell > header {
        display: block;
    }

    .internal-sidebar {
        position: static;
        height: auto;
    }

    .internal-topbar {
        position: static;
    }

    .card,
    .kpi,
    .table-wrap,
    .form-section {
        box-shadow: none;
        break-inside: avoid;
    }

    a {
        color: #000;
    }
}