/* Public submission form: view "Solicitud de evento" of the approved prototype v6.1 (classes .shell, .stepper, .card, .ch,
   .prog, .gt, .field, .grid2/.grid3, .precheck, .notice, .cap, .sup, .moments, .commit-grid, .rightsbox, .audience-card,
   .associated, .childgrid, .upload, .summary, .legal, .consent, .fa). Values copied from the prototype, namespaced under
   "submission-". The shared look (header, band, buttons, alerts) lives in lsa.css. */

.submission-shell {
    --sf-gold: #d6ae62;
    --sf-gold-light: #f1dfb5;
    --sf-gold-soft: #faf3e3;
    --sf-ink: #171717;
    --sf-muted: #6e695f;
    --sf-line: #e5e0d6;
    --sf-ok: #2f654b;

    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 20px;
    /* Wider than the page container, like the prototype (.shell): the page uses the full-bleed main wrapper
       (PublicLayout.FullBleed), so 100 % is the width of the main area (never 100vw, which includes the scrollbar). */
    width: min(1380px, calc(100% - 48px));
    /* 46 px down to the footer like the prototype: the main area already adds its bottom padding. */
    margin: 24px auto calc(46px - var(--space-7));
    color: var(--sf-ink);
    font-size: 15px;
    /* The prototype keeps the browser's "normal" line height; only the rules that set one explicitly differ. */
    line-height: normal;
}

/* Headings inherit that rhythm too (lsa.css gives h1-h4 1.25): element specificity, so class rules still win. */
:where(.submission-shell) h2,
:where(.submission-shell) h3,
:where(.submission-shell) h4 {
    line-height: inherit;
}

/* The band's lead is one line on desktop, like the prototype (.ph p has no measure). */
.submission-hero .page-hero__lead {
    max-width: none;
}

.submission-shell [hidden] {
    display: none !important;
}

/* The band of the page sits right on the shell (prototype .ph followed by .shell). */
.site-main > .container > .submission-hero:first-child {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------- */
/* Side stepper (.stepper / .step / .sn / .st / .sd)                 */
/* ---------------------------------------------------------------- */
.submission-steps {
    position: sticky;
    top: 24px;
    height: max-content;
    padding: 11px;
    border: 1px solid var(--sf-line);
    border-radius: 14px;
    background: #fff;
}

.submission-steps__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The prototype's steps touch each other (lsa.css separates list items by 4 px). */
.submission-steps__item + .submission-steps__item {
    margin-top: 0;
}

.submission-steps__link {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
}

.submission-steps__link:hover {
    background: #fbf8f1;
}

.submission-steps__link:focus-visible {
    outline: var(--focus-outline); /* A11Y-R-03: the single focus recipe (P2-A) */
    outline-offset: var(--focus-offset);
}

/* Current step: besides the prototype's soft background (1.07:1), a 3 px bar and a ring in the accessible gold (7:1,
   WCAG 1.4.11); never by colour alone (aria-current="step" and "(paso actual)" for screen readers). */
.submission-steps__item.is-current .submission-steps__link {
    background: var(--sf-gold-soft);
    box-shadow: inset 3px 0 0 var(--color-gold-strong);
}

.submission-steps__item.is-current .submission-steps__number {
    border: 2px solid var(--color-gold-strong);
    color: var(--color-gold-strong);
}

/* Locked step (not a link): legible muted text (≥ 4.5:1) and a dashed ring. */
.submission-steps__item.is-locked .submission-steps__link {
    cursor: not-allowed;
}

.submission-steps__item.is-locked .submission-steps__link:hover {
    background: none;
}

.submission-steps__item.is-locked .submission-steps__title {
    color: var(--sf-muted);
}

.submission-steps__item.is-locked .submission-steps__number {
    border-style: dashed;
    border-color: var(--color-line-strong);
    color: var(--sf-muted);
}

/* Step with errors (server re-render or a failed attempt): red ring and a visible label. */
.submission-steps__item.has-errors .submission-steps__number {
    border: 2px solid var(--color-danger);
}

.submission-steps__flag {
    display: inline-block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 750;
    color: var(--color-danger);
}

.submission-steps__number {
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    border: 1px solid var(--sf-line);
    border-radius: 50%;
    background: #fff;
    font-size: 11px;
    font-weight: 850;
}

/* Completed (only when valid): the number becomes a check mark on the prototype's black disc. */
.submission-steps__item.is-done .submission-steps__number {
    border-color: #171717;
    background: #171717;
    color: var(--sf-gold-light);
    font-size: 0;
}

.submission-steps__item.is-done .submission-steps__number::before {
    content: "\2713";
    font-size: 13px;
}

.submission-steps__text {
    min-width: 0;
}

.submission-steps__title {
    display: block;
    font-size: 13px;
    font-weight: 780;
}

.submission-steps__description {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--sf-muted);
}

/* ---------------------------------------------------------------- */
/* Form card (.card / .ch / .prog / .body / .fa)                     */
/* ---------------------------------------------------------------- */
.submission-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--sf-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.035);
}

.submission-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 25px;
    border-bottom: 1px solid var(--sf-line);
}

.submission-card__heading {
    min-width: 0;
}

.submission-card__title {
    margin: 0 0 4px;
    font-size: 21px;
    line-height: normal;
}

.submission-card__title:focus {
    outline: none;
}

.submission-card__title:focus-visible {
    outline: var(--focus-outline); /* A11Y-R-03: the single focus recipe (P2-A) */
    outline-offset: var(--focus-offset);
}

.submission-card__subtitle {
    margin: 0;
    font-size: 12px;
    color: var(--sf-muted);
}

.submission-progress {
    flex: none;
    width: 185px;
}

.submission-progress__label {
    display: flex;
    justify-content: space-between;
    margin: 0 0 7px;
    font-size: 12px;
    color: var(--sf-muted);
}

.submission-progress__bar {
    display: block;
    width: 100%;
    height: 5px;
    overflow: hidden;
    border: 0;
    border-radius: 99px;
    background: #ece8df;
    color: var(--sf-gold);
    appearance: none;
}

.submission-progress__bar::-webkit-progress-bar {
    border-radius: 99px;
    background: #ece8df;
}

.submission-progress__bar::-webkit-progress-value {
    border-radius: 99px;
    background: var(--sf-gold);
    transition: width 0.2s;
}

.submission-progress__bar::-moz-progress-bar {
    border-radius: 99px;
    background: var(--sf-gold);
}

.submission-card__body {
    padding: 25px;
}

.submission-card__actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 25px;
    border-top: 1px solid var(--sf-line);
}

/* Prototype buttons: .btn.white (back) and .btn.gold (next / submit). */
.submission-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* The prototype writes the arrow in the same text, one space apart; here it is a separate aria-hidden span. */
    gap: 0.27em;
    min-height: 44px;
    padding: 0 17px;
    border: 1px solid transparent;
    border-radius: 9px;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}

.submission-button:focus-visible {
    outline: var(--focus-outline); /* A11Y-R-03: the single focus recipe (P2-A) */
    outline-offset: var(--focus-offset);
}

.submission-button--gold {
    background: var(--sf-gold);
    color: #241c0c;
}

.submission-button--gold:hover {
    background: #cba155;
}

.submission-button--white {
    border-color: var(--sf-line);
    background: #fff;
    color: var(--sf-ink);
}

.submission-button--white:hover {
    border-color: #cfbd98;
}

.submission-button[aria-disabled="true"] {
    opacity: 0.6;
    cursor: progress;
}

/* Hidden but keeping its place, like the prototype's "visibility: hidden" back button on the first step. */
.submission-button.is-invisible {
    visibility: hidden;
}

/* Without JavaScript only the submit button is shown: right aligned like the prototype's "Continuar". */
.submission-card__actions [data-submit] {
    margin-left: auto;
}

/* ---------------------------------------------------------------- */
/* Steps, groups, fields (.formstep / .group / .gt / .field)         */
/* ---------------------------------------------------------------- */
.submission-step {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

/* Without JavaScript the six steps are stacked: each one starts with its own heading. */
.submission-form:not(.is-enhanced) .submission-step + .submission-step {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--sf-line);
}

.submission-step__legend {
    float: left;
    width: 100%;
    margin: 0 0 18px;
    padding: 0;
    font-size: 17px;
    font-weight: 780;
    letter-spacing: 0;
    text-transform: none;
    color: var(--sf-ink);
}

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

.submission-step__legend + * {
    clear: both;
}

.submission-group {
    margin: 0 0 27px;
}

.submission-group-title {
    margin: 0 0 15px;
    padding-bottom: 9px;
    border-bottom: 1px solid #eee9df;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.12em;
    line-height: 1.4;
    text-transform: uppercase;
    color: #786f60;
}

.submission-group-hint {
    margin: 0 0 11px;
}

.submission-grid--2,
.submission-grid--3 {
    display: grid;
    gap: 15px;
}

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

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

.submission-grid--spaced,
.submission-market {
    margin-top: 12px;
}

.submission-support__detail .submission-grid--spaced {
    margin-top: 10px;
}

/* "At least one element" note of the infrastructure detail (the server requires one). */
.submission-support__required {
    margin: 0 0 8px;
}

.submission-form .field {
    gap: 6px;
    margin: 0;
    min-width: 0;
}

.submission-form .field__label {
    font-size: 12px;
    font-weight: 750;
    line-height: 1.35;
    color: var(--sf-ink);
}

.submission-form .field__required {
    margin-left: 0.3em;
    font-weight: inherit;
    color: inherit;
}

.submission-form .field__hint {
    font-size: 12px;
    line-height: 1.45;
    color: var(--sf-muted);
}

.submission-form .field__error {
    position: relative;
    font-size: 12px;
    line-height: 1.5;
}

/* P1-A (WCAG 1.4.1): a blocking inline message also carries a non-chromatic mark, a decorative "!" disc with an empty
   text alternative (second declaration; browsers without that syntax keep the first one). Notices are not marked. */
.submission-form .field__error:not([data-server-notice]) {
    padding-left: 22px;
}

.submission-form .field__error:not([data-server-notice])::before {
    content: "!";
    content: "!" / "";
    position: absolute;
    top: 1px;
    left: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-danger);
    font-size: 11px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    color: #fff;
}

.submission-label-note {
    font-size: 12px;
    font-weight: inherit;
    color: var(--sf-muted);
}

.submission-form .field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
.submission-form .field select,
.submission-form .field textarea {
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--color-line-strong);
    border-radius: 8px;
    background: #fff;
    font-size: 15px;
    color: var(--sf-ink);
}

.submission-form .field textarea {
    height: 100px;
    min-height: 100px;
    padding: 11px 12px;
    line-height: normal;
    resize: vertical;
}

.submission-form .field input:focus,
.submission-form .field select:focus,
.submission-form .field textarea:focus {
    border-color: var(--sf-gold);
    box-shadow: 0 0 0 3px rgba(214, 174, 98, 0.18);
}

.submission-form [aria-invalid="true"] {
    border-color: var(--color-danger) !important;
}

/* Error summary (GOV.UK pattern): heading, one link per error; it takes the focus after a failed attempt. Focus outline,
   heading, list metrics, 24 px links and their gap are the shared rule set of lsa.css (V2.3 P4, DIS-01); only the spacing of
   the form lives here. */
.submission-errors {
    margin-bottom: 20px;
}

/* "Los campos marcados con * son obligatorios." (said once, WCAG 3.3.2). */
.submission-required-note {
    margin: 0 0 18px;
    font-size: 12px;
    color: var(--sf-muted);
}

/* Fieldsets of checkbox groups (fieldset/legend, WCAG 1.3.1) keep the prototype look: no frame, legend as a title. */
fieldset.submission-group,
fieldset.submission-supports-group,
fieldset.submission-items {
    min-width: 0;
    margin-right: 0;
    margin-left: 0;
    padding: 0;
    border: 0;
}

fieldset.submission-associated {
    min-width: 0;
    margin-right: 0;
    margin-left: 0;
}

legend.submission-group-title,
legend.submission-associated__title {
    float: left;
    width: 100%;
    padding-right: 0;
    padding-left: 0;
}

legend.submission-group-title + *,
legend.submission-associated__title + * {
    clear: both;
}

/* V2.3 P5 (P5U-09): while sending, «Enviar solicitud» takes the shared busy look of lsa.css (.is-busy: ring, full contrast),
   not the dimmed aria-disabled look above. */
.submission-button.is-sending,
.submission-button.is-busy {
    opacity: 1;
    cursor: progress;
}

/* Text shown only without JavaScript. */
.submission-form.is-enhanced .submission-nojs {
    display: none;
}

/* ---------------------------------------------------------------- */
/* Notices (.notice, .notice.ok, .notice.info, .notice.err)          */
/* ---------------------------------------------------------------- */
.submission-notice {
    margin: 0;
    padding: 12px 13px;
    border: 1px solid #eadab7;
    border-radius: 9px;
    background: #fbf5e7;
    font-size: 12px;
    line-height: 1.5;
    color: #6f5522;
}

.submission-notice--ok {
    border-color: #cfe1d7;
    background: #eef6f1;
    color: #315a45;
}

.submission-notice--info {
    border-color: #d6e1e8;
    background: #f0f5f8;
    color: #365e73;
}

.submission-notice--error {
    border-color: #eccfcf;
    background: #fbefef;
    color: #7c3d3d;
}

.submission-notice--warning {
    border-color: #eadab7;
    background: #fbf5e7;
    color: #6f5522;
}

/* V2.2 F4 (DIS-09): a notice that leads with a decorative mark ("!" disc in the notice colour, no text alternative); the
   text itself starts with a word such as «Importante», so the meaning never depends on the colour (WCAG 1.4.1). */
.submission-notice--icon {
    position: relative;
    padding-left: 38px;
}

.submission-notice--icon::before {
    content: "!";
    content: "!" / "";
    position: absolute;
    top: 12px;
    left: 13px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: currentColor;
    font-size: 11px;
    font-weight: 800;
    line-height: 17px;
    text-align: center;
    color: #fff;
}

.submission-notice--warning.submission-notice--icon::before {
    background: #6f5522;
}

/* V2.2 F4 (DIS-02): COP amount. Visible "$" before and "COP" after the value (decorative: the hint says "pesos
   colombianos (COP)"), and under the field the formatted echo written by the script ("$ 1.500.000"), static text that is
   hidden while the field is empty or unreadable. The field keeps exactly what the applicant typed. */
.submission-money {
    position: relative;
}

.submission-form .field .submission-money input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]) {
    width: 100%;
    padding-right: 54px;
    padding-left: 28px;
    font-variant-numeric: tabular-nums;
}

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

.submission-money__affix--end {
    right: 12px;
    left: auto;
    font-size: 12px;
    letter-spacing: 0.06em;
}

.submission-money__echo {
    margin: 0;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.4;
    color: var(--sf-ink);
    font-variant-numeric: tabular-nums;
}

.submission-schedule {
    margin-top: 12px;
}

.submission-total {
    margin-top: 0;
}

/* ---------------------------------------------------------------- */
/* Step 1: preliminary eligibility (.precheck / .eligibility-result) */
/* ---------------------------------------------------------------- */
.submission-precheck {
    margin-bottom: 18px;
    padding: 15px;
    border: 1px solid #d8c9aa;
    border-radius: 12px;
    background: linear-gradient(135deg, #fffdf8, #faf4e6);
}

.submission-precheck__eyebrow {
    margin: 0;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #6f5522;
}

.submission-precheck__title {
    margin: 4px 0 5px;
    font-size: 14px;
}

.submission-precheck__text {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--sf-muted);
}

.submission-precheck__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 13px;
}

.submission-precheck__item {
    padding: 10px;
    border: 1px solid #e7ddc9;
    border-radius: 9px;
    background: #fff;
}

.submission-form .submission-precheck__item .field__label {
    font-size: 12px;
    color: #766d60;
}

.submission-eligibility {
    margin: 11px 0 0;
    padding: 11px 12px;
    border: 1px solid #cfe0d6;
    border-radius: 9px;
    background: #edf5f0;
    font-size: 12px;
    line-height: 1.45;
    color: #315e47;
}

.submission-eligibility--review {
    border-color: #e5d4ad;
    background: #faf3e5;
    color: #76591e;
}

/* Without organizer or venue the request cannot be filed (the server refuses it): the step does not go forward. */
.submission-eligibility--blocked {
    border-color: #eccfcf;
    background: #faeeee;
    color: #823c3c;
}

/* Department "Otro": the list of the other departments. */
.submission-other-department {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.submission-form .submission-sublabel {
    font-size: 12px;
}

/* ---------------------------------------------------------------- */
/* Step 2: associated activities, capacity, audience                 */
/* ---------------------------------------------------------------- */
.submission-associated {
    margin-top: 12px;
    padding: 13px;
    border: 1px solid var(--sf-line);
    border-radius: 11px;
    background: #fbfaf7;
}

.submission-associated__title {
    margin: 0 0 8px;
    font-size: 12px;
}

.submission-associated__hint {
    margin: 0 0 9px;
}

.submission-associated__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.submission-assoc {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px;
    border: 1px solid var(--sf-line);
    border-radius: 8px;
    background: #fff;
    font-size: 12px;
    cursor: pointer;
}

/* Prototype checkboxes keep the browser's default height (13 px) and margins (3px 3px 3px 4px); only the width is set. */
.submission-assoc input,
.submission-mini input {
    flex: none;
    width: 15px;
    height: 13px;
    margin: 3px 3px 3px 4px;
    accent-color: #896a2c;
}

.submission-children {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 11px;
}

.submission-child {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--sf-line);
    border-radius: 10px;
    background: #fff;
}

.submission-child__ref {
    margin: 0;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8a6a2b;
}

.submission-child__name {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
}

.submission-child__text {
    margin: 5px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--sf-muted);
}

.submission-child__fields {
    margin-top: 9px;
}

.submission-capacity {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 12px;
    margin-top: 13px;
}

.submission-capacity__box {
    padding: 14px;
    border: 1px solid #ddceb0;
    border-radius: 11px;
    background: #fbf5e8;
}

.submission-capacity__label {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #796b50;
}

.submission-capacity__value {
    display: block;
    margin-top: 5px;
    font-size: 26px;
}

.submission-capacity__note {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.4;
    color: #6f6757;
}

.submission-panel {
    padding: 14px;
    border: 1px solid var(--sf-line);
    border-radius: 12px;
    background: #fbfaf7;
}

/* Prototype .rightsbox (evidence and image use): slightly tighter than .audience-card. */
.submission-panel--rights {
    padding: 13px;
    border-radius: 11px;
}

.submission-panel__notice {
    margin-top: 11px;
}

.submission-panel__note {
    margin: 9px 0 0;
}

/* ---------------------------------------------------------------- */
/* Step 3: supports (.sup / .shead / .sdetail / .mini / .logistics)  */
/* ---------------------------------------------------------------- */
.submission-supports__intro {
    margin-bottom: 12px;
}

.submission-support {
    margin-bottom: 12px;
    overflow: hidden;
    border: 1px solid var(--sf-line);
    border-radius: 12px;
    background: #fff;
}

.submission-support.is-selected {
    border-color: #d5b979;
    background: #fffdf8;
}

.submission-support__head {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px;
    cursor: pointer;
}

.submission-support__head input {
    flex: none;
    width: 17px;
    height: 13px;
    margin: 2px 3px 3px 4px;
    accent-color: #896a2c;
}

/* Inline like the prototype's <b>: its line box takes the 15 px line height of the card, then the text drops below. */
.submission-support__title {
    display: inline;
    font-size: 13px;
    font-weight: 700;
}

.submission-support__text {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: var(--sf-muted);
}

.submission-support__detail {
    padding: 0 14px 14px 42px;
}

.submission-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.submission-mini {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border: 1px solid var(--sf-line);
    border-radius: 8px;
    background: #fff;
    font-size: 12px;
    cursor: pointer;
}

.submission-logistics {
    margin-top: 12px;
    padding: 13px;
    border: 1px solid #ded5c5;
    border-radius: 11px;
    background: #fbfaf7;
}

.submission-logistics__title {
    margin: 0 0 10px;
    font-size: 12px;
}

[data-deposit-notice] {
    margin-top: 12px;
}

/* ---------------------------------------------------------------- */
/* Step 4: benefit and moment cards, commitments, rights             */
/* ---------------------------------------------------------------- */
.submission-moments {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.submission-moment {
    display: block;
    padding: 12px;
    border: 1px solid var(--sf-line);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
}

.submission-moment.is-active {
    border-color: var(--sf-gold);
    background: var(--sf-gold-soft);
}

.submission-moment:focus-within {
    outline: var(--focus-outline); /* A11Y-R-03: the single focus recipe (P2-A) */
    outline-offset: var(--focus-offset);
}

.submission-moment input {
    width: 15px;
    height: 13px;
    margin: 3px 3px 3px 4px;
    accent-color: #896a2c;
}

.submission-moment__title {
    display: block;
    margin: 6px 0 3px;
    font-size: 12px;
    font-weight: 700;
}

/* Inline like the prototype's <small>: it sits in the card's 15 px line box. */
.submission-moment__text {
    display: inline;
    font-size: 12px;
    line-height: 1.35;
    color: var(--sf-muted);
}

.submission-commitments {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

.submission-form .submission-commitment {
    padding: 10px;
    border: 1px solid var(--sf-line);
    border-radius: 9px;
    background: #fff;
}

/* The prototype's label is inline in a 15 px line box (20 px tall): same height and baseline here. */
.submission-form .submission-commitment .field__label {
    padding: 5px 0 1px;
    font-size: 12px;
    font-weight: 700;
    color: var(--sf-muted);
}

/* ---------------------------------------------------------------- */
/* Step 5: documents (.doc-note / .upload / .uh / .req / .opt)       */
/* ---------------------------------------------------------------- */
.submission-doc-note {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-left: 3px solid var(--sf-gold);
    background: #fbf7ee;
    font-size: 12px;
    line-height: 1.5;
    color: #665e50;
}

.submission-doc-limits {
    margin: 0 0 12px;
}

.submission-upload {
    margin-bottom: 10px;
    padding: 14px;
    border: 1px solid var(--sf-line);
    border-radius: 11px;
    background: #fff;
}

.submission-upload__head {
    display: flex;
    /* Default stretch, like the prototype .uh: the badge is as tall as the name and description. */
    align-items: stretch;
    justify-content: space-between;
    gap: 14px;
}

.submission-upload__heading {
    min-width: 0;
}

.submission-upload__name {
    display: block;
    font-size: 15px;
    font-weight: 700;
}

.submission-upload__description,
.submission-upload__conditions {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--sf-muted);
}

.submission-upload__description:empty {
    display: none;
}

.submission-form.is-enhanced .submission-upload__conditions {
    display: none;
}

.submission-badge {
    flex: none;
    padding: 4px 6px;
    border: 1px solid;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.submission-badge--required {
    border-color: #ead7ae;
    background: #fbf2df;
    color: #7a5420;
}

.submission-badge--optional {
    border-color: #d8e0e5;
    background: #f0f3f5;
    color: #5c666e;
}

.submission-upload input[type="file"] {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: auto;
    margin-top: 10px;
    padding: 9px;
    border: 1px dashed #c9b38a;
    border-radius: 8px;
    background: #fffdf8;
    font-size: 12px;
    color: var(--sf-ink);
    cursor: pointer;
}

/* V2.2 F4 (DIS-10): the native selector button looks like the secondary button (its text is the browser's and cannot be
   changed by CSS); 44 px tall for touch. With the script the state line below ("✓ archivo.pdf") is the one place that
   names the file, so the control's own file name text is made transparent (still exposed to assistive technology);
   without JavaScript the control keeps showing it. */
.submission-upload input[type="file"]::file-selector-button {
    min-height: 44px;
    margin-right: 12px;
    padding: 0 16px;
    border: 1px solid var(--color-line-strong);
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 750;
    color: var(--sf-ink);
    cursor: pointer;
}

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

.submission-upload input[type="file"]:disabled::file-selector-button {
    cursor: not-allowed;
}

.submission-form.is-enhanced .submission-upload input[type="file"] {
    color: transparent;
}

.submission-upload__state {
    margin: 7px 0 0;
    font-size: 12px;
    color: var(--sf-muted);
}

.submission-upload__state.is-good {
    font-weight: 700;
    color: var(--sf-ok);
}

/* ---------------------------------------------------------------- */
/* Step 6: summary, privacy notice and consents (.summary / .legal)  */
/* ---------------------------------------------------------------- */
.submission-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin: 0;
}

.submission-summary__item {
    min-width: 0;
    padding: 13px;
    border: 1px solid var(--sf-line);
    border-radius: 10px;
}

.submission-summary__item dt {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sf-muted);
}

.submission-summary__item dd {
    margin: 5px 0 0;
    font-size: 13px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* V2.2 F4 (DIS-15): the review summary in one group per step, each with its heading and a "Cambiar" link back to the
   step (GOV.UK "Check answers"). The entries keep the .submission-summary boxes. */
.submission-review {
    display: grid;
    gap: 18px;
}

.submission-review__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 12px;
    margin-bottom: 8px;
}

.submission-review__title {
    margin: 0;
    font-size: 13px;
    font-weight: 800;
    color: var(--sf-ink);
}

.submission-review__change {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    font-size: 13px;
    font-weight: 750;
    color: var(--color-gold-strong);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.submission-review__change:hover {
    color: var(--sf-ink);
}

@media (pointer: coarse) {
    .submission-review__change {
        min-height: 44px;
    }
}

.submission-legal {
    margin-top: 16px;
    padding: 15px;
    border: 1px solid #ddd4c3;
    border-radius: 12px;
    background: #fbfaf7;
}

.submission-legal__title {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    /* The prototype's <strong> sits in the box's 15 px line (20 px tall). */
    line-height: 20px;
}

.submission-legal__text {
    margin: 11px 0;
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-line;
    color: #5f5a52;
}

.submission-legal__link {
    font-weight: 800;
    color: #74551d;
    text-decoration: underline;
}

.submission-legal__actions {
    margin: 0 0 11px;
}

.submission-legal .submission-legal__button {
    min-height: 35px;
    padding: 0 12px;
    border: 1px solid var(--sf-line);
    border-radius: 9px;
    background: #fff;
    font-size: 12px;
    color: var(--sf-ink);
}

.submission-consent {
    display: flex;
    gap: 10px;
    padding: 11px 0;
    border-top: 1px solid var(--sf-line);
}

.submission-consent input {
    flex: none;
    width: 17px;
    height: 13px;
    margin: 2px 3px 3px 4px;
    accent-color: #896a2c;
}

.submission-consent label {
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-line;
}

.submission-consent__hint {
    margin: 0 0 4px;
}

/* ---------------------------------------------------------------- */
/* Responsive: the two cuts of the visual system (V2.3 P4, DIS-24): 1050 px (stepper on top) and 720 px (one column).    */
/* [DESVÍO v6.1] the prototype's intermediate cuts are retired: 1000 px → 1050 px, 850 / 720 / 700 px → 719.98 px.     */
/* ---------------------------------------------------------------- */
@media (max-width: 1050px) {
    .submission-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .submission-steps {
        position: static;
        overflow: auto;
    }

    .submission-steps__list {
        display: flex;
    }

    /* Prototype .step: shrinkable flex item with a 180 px minimum, so each step is 180 px and its text wraps. */
    .submission-steps__item {
        flex: 0 1 auto;
        min-width: 180px;
    }

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

@media (max-width: 719.98px) {
    .submission-shell {
        width: calc(100% - 24px);
    }

    .submission-card__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .submission-progress {
        width: 100%;
    }

    .submission-card__body {
        padding: 19px;
    }

    .submission-card__actions {
        padding: 16px 19px;
    }

    .submission-grid--2,
    .submission-grid--3,
    .submission-mini-grid,
    .submission-moments,
    .submission-summary,
    .submission-capacity {
        grid-template-columns: minmax(0, 1fr);
    }

    .submission-support__detail {
        padding-left: 14px;
    }

    .submission-associated__grid,
    .submission-precheck__grid,
    .submission-commitments,
    .submission-children {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* V2.3 P4 [DESVÍO v6.1]: on phones tall enough (720 px wide or less, 560 px tall or more) the step actions («Atrás»,
   «Continuar», «Enviar solicitud») stay at the bottom of the viewport (.sticky-actions of lsa.css, which also reserves their
   height as scroll padding: WCAG 2.2 2.4.11, the focused field is scrolled above the bar). The card clips its rounded
   corners with overflow: clip instead of hidden, which would make it a scroll container and stop the bar from sticking. */
@media (max-width: 719.98px) and (min-height: 560px) {
    .submission-card {
        overflow: clip;
    }

    .submission-card__actions.sticky-actions {
        padding: 12px 19px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .submission-progress__bar::-webkit-progress-value {
        transition: none;
    }
}

@media print {
    .submission-steps,
    .submission-card__actions,
    .submission-progress {
        display: none;
    }

    .submission-shell {
        display: block;
        width: auto;
        margin: 0;
    }

    .submission-card {
        border: 0;
        box-shadow: none;
    }
}