/* =========================================================
   SUBIR FOTOGRAFÍAS
   RETIRO NACIONAL DE JÓVENES 2026

   Diseño mobile first
========================================================= */


/* =========================================================
   VARIABLES LOCALES
========================================================= */

:root {
    --upload-background: #f7f3ea;
    --upload-background-soft: #fbf9f4;

    --upload-surface: #ffffff;
    --upload-surface-soft: #f8f8f9;

    --upload-navy: #0b1626;
    --upload-navy-soft: #14243a;
    --upload-blue: #1d3859;

    --upload-gold: #c79b4b;
    --upload-gold-light: #e7d2a3;
    --upload-gold-dark: #9f742e;

    --upload-text: #172033;
    --upload-text-soft: #667085;
    --upload-text-muted: #98a2b3;

    --upload-border:
        rgba(11, 22, 38, 0.1);

    --upload-border-strong:
        rgba(11, 22, 38, 0.16);

    --upload-success: #23643f;
    --upload-success-background:
        rgba(46, 125, 83, 0.1);

    --upload-danger: #8f2429;
    --upload-danger-background:
        rgba(191, 63, 69, 0.09);

    --upload-info: #285d88;
    --upload-info-background:
        rgba(40, 93, 136, 0.08);

    --upload-shadow-small:
        0 10px 30px rgba(11, 22, 38, 0.07);

    --upload-shadow-medium:
        0 24px 70px rgba(11, 22, 38, 0.11);

    --upload-radius-small: 14px;
    --upload-radius-medium: 22px;
    --upload-radius-large: 30px;
    --upload-radius-full: 999px;

    --upload-transition:
        220ms ease;
}


/* =========================================================
   BASE
========================================================= */

html {
    scroll-padding-top: 6rem;
}

body {
    min-width: 320px;
    overflow-x: hidden;

    background:
        radial-gradient(
            circle at top center,
            rgba(199, 155, 75, 0.09),
            transparent 28rem
        ),
        var(--upload-background);

    color:
        var(--upload-text);
}

button,
input,
textarea {
    font: inherit;
}

button {
    border: 0;
}

textarea {
    resize: vertical;
}


/* =========================================================
   ENCABEZADO
========================================================= */

.upload-header {
    position: relative;
    z-index: 10;

    padding:
        max(0.8rem, env(safe-area-inset-top))
        0
        0;
}

.upload-header__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;

    min-height: 64px;
    padding:
        0.55rem
        0.6rem
        0.55rem
        0.65rem;

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

    border-radius:
        var(--upload-radius-full);

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

    box-shadow:
        var(--upload-shadow-small);

    backdrop-filter:
        blur(20px) saturate(145%);

    -webkit-backdrop-filter:
        blur(20px) saturate(145%);
}


/* =========================================================
   MARCA
========================================================= */

.upload-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;

    min-width: 0;

    color:
        var(--upload-navy);

    text-decoration:
        none;
}

.upload-brand__mark {
    display: grid;
    flex:
        0 0 auto;

    place-items:
        center;

    width:
        42px;
    height:
        42px;

    border-radius:
        50%;

    background:
        linear-gradient(
            145deg,
            var(--upload-gold),
            #ecd59e
        );

    color:
        var(--upload-navy);

    font-size:
        0.75rem;

    font-weight:
        900;

    letter-spacing:
        0.04em;

    box-shadow:
        inset
        0
        0
        0
        1px
        rgba(255, 255, 255, 0.5);
}

.upload-brand__text {
    display:
        grid;

    min-width:
        0;
}

.upload-brand__text strong {
    overflow:
        hidden;

    font-size:
        0.76rem;

    font-weight:
        900;

    line-height:
        1.1;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}

.upload-brand__text small {
    display:
        none;

    margin-top:
        0.2rem;

    color:
        var(--upload-text-soft);

    font-size:
        0.62rem;

    font-weight:
        700;
}


/* =========================================================
   BOTÓN VOLVER
========================================================= */

.upload-back {
    display: inline-flex;
    flex:
        0 0 auto;

    align-items:
        center;
    justify-content:
        center;

    gap:
        0.4rem;

    min-height:
        44px;

    padding:
        0.7rem
        0.9rem;

    border-radius:
        var(--upload-radius-full);

    background:
        var(--upload-navy);

    color:
        #ffffff;

    font-size:
        0.72rem;

    font-weight:
        800;

    line-height:
        1;

    text-decoration:
        none;

    box-shadow:
        0
        10px
        24px
        rgba(11, 22, 38, 0.17);

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

.upload-back:active {
    transform:
        scale(0.97);
}


/* =========================================================
   CONTENIDO
========================================================= */

.upload-main {
    padding:
        3rem
        0
        5rem;
}

.upload-container {
    max-width:
        780px;
}


/* =========================================================
   INTRODUCCIÓN
========================================================= */

.upload-intro {
    max-width:
        700px;

    margin-bottom:
        2rem;
}

.upload-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;

    margin-bottom:
        0.85rem;

    color:
        var(--upload-gold-dark);

    font-size:
        0.68rem;

    font-weight:
        900;

    letter-spacing:
        0.15em;

    line-height:
        1.2;

    text-transform:
        uppercase;
}

.upload-eyebrow::before {
    width:
        24px;
    height:
        2px;

    border-radius:
        999px;

    background:
        currentColor;

    content:
        "";
}

.upload-intro h1 {
    max-width:
        720px;

    margin:
        0;

    color:
        var(--upload-navy);

    font-size:
        clamp(2.45rem, 12vw, 5rem);

    font-weight:
        900;

    letter-spacing:
        -0.065em;

    line-height:
        0.95;
}

.upload-intro > p:last-child {
    max-width:
        650px;

    margin-top:
        1.25rem;

    color:
        var(--upload-text-soft);

    font-size:
        0.95rem;

    font-weight:
        500;

    line-height:
        1.75;
}


/* =========================================================
   FORMULARIO
========================================================= */

.upload-form {
    display:
        grid;

    gap:
        1rem;
}


/* =========================================================
   SECCIONES
========================================================= */

.upload-section {
    padding:
        1.15rem;

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

    border-radius:
        var(--upload-radius-medium);

    background:
        var(--upload-surface);

    box-shadow:
        var(--upload-shadow-small);
}

.upload-section__heading {
    margin-bottom:
        1.25rem;
}

.upload-section__heading > div {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        0.85rem;
}

.upload-section__number {
    display:
        grid;

    flex:
        0 0 auto;

    place-items:
        center;

    width:
        34px;
    height:
        34px;

    border-radius:
        50%;

    background:
        var(--upload-navy);

    color:
        #ffffff;

    font-size:
        0.7rem;

    font-weight:
        900;

    box-shadow:
        0
        8px
        20px
        rgba(11, 22, 38, 0.16);
}

.upload-section__heading h2 {
    margin:
        0;

    color:
        var(--upload-navy);

    font-size:
        1rem;

    font-weight:
        900;

    letter-spacing:
        -0.025em;

    line-height:
        1.3;
}

.upload-section__heading p {
    margin-top:
        0.25rem;

    color:
        var(--upload-text-soft);

    font-size:
        0.73rem;

    font-weight:
        500;

    line-height:
        1.5;
}


/* =========================================================
   INPUT DE ARCHIVOS
========================================================= */

#fotos {
    position:
        absolute;

    width:
        1px;
    height:
        1px;

    margin:
        -1px;

    overflow:
        hidden;

    clip:
        rect(0, 0, 0, 0);

    white-space:
        nowrap;

    opacity:
        0;
}


/* =========================================================
   ZONA DE SELECCIÓN
========================================================= */

.drop-zone {
    display:
        grid;

    justify-items:
        center;

    min-height:
        270px;

    padding:
        1.6rem
        1rem;

    border:
        2px dashed rgba(11, 22, 38, 0.2);

    border-radius:
        20px;

    background:
        var(--upload-background-soft);

    text-align:
        center;

    cursor:
        pointer;

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

.drop-zone:active {
    transform:
        scale(0.99);
}

.drop-zone.is-dragging {
    border-color:
        var(--upload-gold);

    background:
        rgba(199, 155, 75, 0.1);

    box-shadow:
        0
        0
        0
        5px
        rgba(199, 155, 75, 0.1);
}

.drop-zone__icon {
    display:
        grid;

    place-items:
        center;

    width:
        62px;
    height:
        62px;

    margin-bottom:
        1rem;

    border-radius:
        22px;

    background:
        var(--upload-navy);

    color:
        #ffffff;

    font-size:
        1.7rem;

    font-weight:
        500;

    box-shadow:
        0
        14px
        30px
        rgba(11, 22, 38, 0.18);
}

.drop-zone strong {
    max-width:
        270px;

    color:
        var(--upload-navy);

    font-size:
        1rem;

    font-weight:
        900;

    line-height:
        1.35;
}

.drop-zone__desktop-text {
    display:
        none;

    margin-top:
        0.45rem;

    color:
        var(--upload-text-soft);

    font-size:
        0.75rem;

    font-weight:
        500;
}

.drop-zone__formats {
    margin-top:
        0.4rem;

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

    font-size:
        0.68rem;

    font-weight:
        700;

    letter-spacing:
        0.04em;
}

.drop-zone__button {
    display:
        inline-flex;

    align-items:
        center;
    justify-content:
        center;

    min-height:
        48px;

    margin-top:
        1.2rem;

    padding:
        0.8rem
        1.2rem;

    border-radius:
        var(--upload-radius-full);

    background:
        var(--upload-navy);

    color:
        #ffffff;

    font-size:
        0.76rem;

    font-weight:
        900;

    line-height:
        1;

    box-shadow:
        0
        11px
        24px
        rgba(11, 22, 38, 0.17);
}


/* =========================================================
   LÍMITES
========================================================= */

.upload-limits {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;
    justify-content:
        center;

    gap:
        0.35rem;

    margin-top:
        0.85rem;

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

    font-size:
        0.62rem;

    font-weight:
        700;

    line-height:
        1.5;

    text-align:
        center;
}


/* =========================================================
   RESUMEN DE SELECCIÓN
========================================================= */

.selection-summary {
    display:
        flex;

    align-items:
        center;
    justify-content:
        space-between;

    gap:
        1rem;

    margin-top:
        1.25rem;

    padding:
        0.9rem
        1rem;

    border:
        1px solid rgba(199, 155, 75, 0.22);

    border-radius:
        16px;

    background:
        rgba(199, 155, 75, 0.09);
}

.selection-summary[hidden] {
    display:
        none;
}

.selection-summary > div {
    display:
        grid;

    min-width:
        0;
}

.selection-summary strong {
    overflow:
        hidden;

    color:
        var(--upload-navy);

    font-size:
        0.76rem;

    font-weight:
        900;

    line-height:
        1.3;

    text-overflow:
        ellipsis;
}

.selection-summary span {
    margin-top:
        0.2rem;

    color:
        var(--upload-text-soft);

    font-size:
        0.65rem;

    font-weight:
        600;
}

.selection-summary__clear {
    flex:
        0 0 auto;

    min-height:
        40px;

    padding:
        0.6rem
        0.75rem;

    border-radius:
        12px;

    background:
        rgba(11, 22, 38, 0.07);

    color:
        var(--upload-navy);

    font-size:
        0.65rem;

    font-weight:
        900;
}


/* =========================================================
   MINIATURAS
========================================================= */

.previews {
    display:
        grid;

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

    gap:
        0.75rem;

    margin-top:
        1rem;
}

.previews:empty {
    display:
        none;
}

.preview {
    min-width:
        0;

    overflow:
        hidden;

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

    border-radius:
        16px;

    background:
        var(--upload-surface);

    box-shadow:
        0
        8px
        24px
        rgba(11, 22, 38, 0.07);
}

.preview__image-wrapper {
    position:
        relative;

    aspect-ratio:
        1;

    overflow:
        hidden;

    background:
        var(--upload-surface-soft);
}

.preview__image {
    width:
        100%;
    height:
        100%;

    object-fit:
        cover;
}

.preview__remove {
    position:
        absolute;

    top:
        0.45rem;
    right:
        0.45rem;

    display:
        grid;

    place-items:
        center;

    width:
        36px;
    height:
        36px;

    padding:
        0;

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

    border-radius:
        50%;

    background:
        rgba(5, 12, 21, 0.75);

    color:
        #ffffff;

    font-size:
        1.25rem;

    line-height:
        1;

    box-shadow:
        0
        6px
        16px
        rgba(0, 0, 0, 0.2);

    backdrop-filter:
        blur(10px);

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

.preview__information {
    display:
        grid;

    gap:
        0.2rem;

    padding:
        0.65rem
        0.7rem
        0.75rem;
}

.preview__filename {
    overflow:
        hidden;

    color:
        var(--upload-navy);

    font-size:
        0.66rem;

    font-weight:
        800;

    line-height:
        1.3;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}

.preview__size {
    color:
        var(--upload-text-muted);

    font-size:
        0.6rem;

    font-weight:
        600;
}


/* =========================================================
   CAMPOS
========================================================= */

.upload-fields {
    display:
        grid;

    gap:
        1rem;
}

.upload-field {
    display:
        grid;

    gap:
        0.45rem;
}

.upload-field label {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        0.4rem;

    color:
        var(--upload-navy);

    font-size:
        0.74rem;

    font-weight:
        900;
}

.upload-field label span {
    color:
        var(--upload-text-muted);

    font-size:
        0.58rem;

    font-weight:
        700;

    letter-spacing:
        0.04em;

    text-transform:
        uppercase;
}

.upload-field input,
.upload-field textarea {
    width:
        100%;

    min-height:
        54px;

    padding:
        0.9rem
        1rem;

    border:
        1px solid var(--upload-border-strong);

    border-radius:
        15px;

    outline:
        0;

    background:
        var(--upload-surface-soft);

    color:
        var(--upload-text);

    font-size:
        0.88rem;

    font-weight:
        500;

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

.upload-field textarea {
    min-height:
        125px;

    line-height:
        1.6;
}

.upload-field input::placeholder,
.upload-field textarea::placeholder {
    color:
        var(--upload-text-muted);

    font-weight:
        500;
}

.upload-field input:focus,
.upload-field textarea:focus {
    border-color:
        rgba(199, 155, 75, 0.92);

    background:
        #ffffff;

    box-shadow:
        0
        0
        0
        4px
        rgba(199, 155, 75, 0.12);
}

.upload-field > small {
    color:
        var(--upload-text-muted);

    font-size:
        0.62rem;

    font-weight:
        500;

    line-height:
        1.5;
}

.upload-field__footer {
    display:
        flex;

    align-items:
        flex-start;
    justify-content:
        space-between;

    gap:
        1rem;
}

.upload-field__footer small {
    color:
        var(--upload-text-muted);

    font-size:
        0.6rem;

    font-weight:
        500;

    line-height:
        1.45;
}

.upload-field__footer small:last-child {
    flex:
        0 0 auto;

    font-weight:
        700;
}


/* =========================================================
   AUTORIZACIÓN
========================================================= */

.privacy-card {
    position:
        relative;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        0.8rem;

    padding:
        1rem;

    border:
        1px solid rgba(11, 22, 38, 0.11);

    border-radius:
        18px;

    background:
        var(--upload-background-soft);

    cursor:
        pointer;

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

.privacy-card:has(input:checked) {
    border-color:
        rgba(199, 155, 75, 0.58);

    background:
        rgba(199, 155, 75, 0.1);

    box-shadow:
        0
        0
        0
        4px
        rgba(199, 155, 75, 0.08);
}

.privacy-card input {
    position:
        absolute;

    width:
        1px;
    height:
        1px;

    opacity:
        0;
}

.privacy-card__checkbox {
    display:
        grid;

    flex:
        0 0 auto;

    place-items:
        center;

    width:
        26px;
    height:
        26px;

    margin-top:
        0.1rem;

    border:
        2px solid rgba(11, 22, 38, 0.22);

    border-radius:
        8px;

    background:
        #ffffff;

    color:
        transparent;

    font-size:
        0.8rem;

    font-weight:
        900;

    transition:
        border-color var(--upload-transition),
        background-color var(--upload-transition),
        color var(--upload-transition);
}

.privacy-card input:checked +
.privacy-card__checkbox {
    border-color:
        var(--upload-navy);

    background:
        var(--upload-navy);

    color:
        #ffffff;
}

.privacy-card input:focus-visible +
.privacy-card__checkbox {
    outline:
        3px solid rgba(199, 155, 75, 0.6);

    outline-offset:
        3px;
}

.privacy-card__content {
    display:
        grid;

    gap:
        0.35rem;
}

.privacy-card__content strong {
    color:
        var(--upload-navy);

    font-size:
        0.75rem;

    font-weight:
        900;

    line-height:
        1.45;
}

.privacy-card__content > span {
    color:
        var(--upload-text-soft);

    font-size:
        0.68rem;

    font-weight:
        500;

    line-height:
        1.6;
}


/* =========================================================
   NOTA DE REVISIÓN
========================================================= */

.review-note {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        0.7rem;

    margin-top:
        0.85rem;

    padding:
        0.85rem;

    border-radius:
        15px;

    background:
        var(--upload-info-background);

    color:
        var(--upload-info);
}

.review-note > span {
    flex:
        0 0 auto;

    font-size:
        0.9rem;
}

.review-note p {
    font-size:
        0.65rem;

    font-weight:
        600;

    line-height:
        1.6;
}


/* =========================================================
   MENSAJES
========================================================= */

.form-message {
    padding:
        1rem;

    border:
        1px solid transparent;

    border-radius:
        18px;

    font-size:
        0.76rem;

    font-weight:
        650;

    line-height:
        1.65;

    box-shadow:
        var(--upload-shadow-small);
}

.form-message[hidden] {
    display:
        none;
}

.form-message.is-success {
    border-color:
        rgba(46, 125, 83, 0.18);

    background:
        var(--upload-success-background);

    color:
        var(--upload-success);
}

.form-message.is-error {
    border-color:
        rgba(191, 63, 69, 0.17);

    background:
        var(--upload-danger-background);

    color:
        var(--upload-danger);
}


/* =========================================================
   BOTÓN DE ENVÍO
========================================================= */

.submit-button {
    display:
        inline-flex;

    align-items:
        center;
    justify-content:
        center;

    gap:
        0.7rem;

    width:
        100%;

    min-height:
        58px;

    padding:
        0.95rem
        1.2rem;

    border-radius:
        18px;

    background:
        var(--upload-navy);

    color:
        #ffffff;

    font-size:
        0.84rem;

    font-weight:
        900;

    line-height:
        1;

    box-shadow:
        0
        16px
        34px
        rgba(11, 22, 38, 0.21);

    transition:
        transform var(--upload-transition),
        background-color var(--upload-transition),
        box-shadow var(--upload-transition),
        opacity var(--upload-transition);
}

.submit-button:active:not(:disabled) {
    transform:
        scale(0.985);
}

.submit-button:disabled {
    cursor:
        wait;

    opacity:
        0.72;
}

.submit-button__loader {
    width:
        19px;
    height:
        19px;

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

    border-top-color:
        #ffffff;

    border-radius:
        50%;

    animation:
        upload-spin
        800ms
        linear
        infinite;
}

.submit-button__loader[hidden] {
    display:
        none;
}

.submit-note {
    color:
        var(--upload-text-muted);

    font-size:
        0.62rem;

    font-weight:
        600;

    line-height:
        1.5;

    text-align:
        center;
}

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


/* =========================================================
   FOOTER
========================================================= */

.upload-footer {
    padding:
        2rem
        0
        max(2rem, env(safe-area-inset-bottom));

    background:
        #07111e;

    color:
        #ffffff;
}

.upload-footer__content {
    display:
        grid;

    gap:
        1.3rem;
}

.upload-footer__brand {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.7rem;

    width:
        fit-content;

    color:
        #ffffff;

    text-decoration:
        none;
}

.upload-footer__brand > span {
    display:
        grid;

    place-items:
        center;

    width:
        40px;
    height:
        40px;

    border-radius:
        50%;

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

    color:
        var(--upload-gold-light);

    font-size:
        0.7rem;

    font-weight:
        900;
}

.upload-footer__brand div {
    display:
        grid;
}

.upload-footer__brand strong {
    font-size:
        0.75rem;

    font-weight:
        900;
}

.upload-footer__brand small {
    margin-top:
        0.2rem;

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

    font-size:
        0.6rem;

    font-weight:
        600;
}

.upload-footer__content > p {
    color:
        rgba(255, 255, 255, 0.42);

    font-size:
        0.65rem;

    font-weight:
        600;
}


/* =========================================================
   NOSCRIPT
========================================================= */

.upload-noscript {
    position:
        fixed;

    right:
        1rem;
    bottom:
        1rem;
    left:
        1rem;

    z-index:
        3000;

    padding:
        1rem;

    border-radius:
        16px;

    background:
        var(--upload-danger);

    color:
        #ffffff;

    font-size:
        0.75rem;

    font-weight:
        700;

    line-height:
        1.5;

    text-align:
        center;

    box-shadow:
        var(--upload-shadow-medium);
}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 600px) {

    .upload-brand__text small {
        display:
            block;
    }

    .upload-main {
        padding-top:
            4rem;
    }

    .upload-section {
        padding:
            1.5rem;

        border-radius:
            26px;
    }

    .drop-zone {
        min-height:
            300px;

        padding:
            2rem;
    }

    .drop-zone__desktop-text {
        display:
            block;
    }

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

        gap:
            0.9rem;
    }

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

    .upload-field--full {
        grid-column:
            1 / -1;
    }

    .upload-footer__content {
        display:
            flex;

        align-items:
            center;
        justify-content:
            space-between;

        gap:
            2rem;
    }
}


/* =========================================================
   ESCRITORIO
========================================================= */

@media (min-width: 900px) {

    .upload-main {
        padding:
            5rem
            0
            7rem;
    }

    .upload-intro {
        margin-bottom:
            2.7rem;
    }

    .upload-intro > p:last-child {
        font-size:
            1rem;
    }

    .upload-form {
        gap:
            1.25rem;
    }

    .upload-section {
        padding:
            1.8rem;
    }

    .upload-section__heading {
        margin-bottom:
            1.5rem;
    }

    .upload-section__heading h2 {
        font-size:
            1.08rem;
    }

    .drop-zone:hover {
        border-color:
            var(--upload-gold);

        background:
            rgba(199, 155, 75, 0.08);

        box-shadow:
            0
            0
            0
            5px
            rgba(199, 155, 75, 0.08);
    }

    .upload-back:hover,
    .submit-button:hover:not(:disabled) {
        transform:
            translateY(-2px);

        background:
            var(--upload-blue);

        box-shadow:
            0
            20px
            42px
            rgba(11, 22, 38, 0.26);
    }

    .selection-summary__clear:hover {
        background:
            rgba(11, 22, 38, 0.12);
    }

    .preview__remove:hover {
        transform:
            scale(1.06);

        background:
            rgba(143, 36, 41, 0.9);
    }
}


/* =========================================================
   MOVIMIENTO REDUCIDO
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior:
            auto !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }
}


/* =========================================================
   IMPRESIÓN
========================================================= */

@media print {

    .upload-header,
    .upload-footer,
    .drop-zone,
    .previews,
    .selection-summary,
    .submit-button,
    .submit-note {
        display:
            none !important;
    }

    body {
        background:
            #ffffff;
    }

    .upload-section {
        box-shadow:
            none;
    }
}