:root
{
    --clr-primary: #ec1c24;
    --clr-danger: hsl(7 100% 66%);
    --clr-warning: hsl(53 100% 21%);
    --clr-success: hsl(162 100% 22%);
    --clr-info: hsl(217 100% 70%);
    
    --clr-bg-dark: hsl(0 0% 90%);
    --clr-bg: hsl(0 0% 95%);
    --clr-bg-light: hsl(0 0% 100%);

    --bg-op: .7;
    --clr-bg-op: hsl(0 0% 95% / var(--bg-op));
    --clr-bg-light-op: hsl(0 0% 100% / var(--bg-op));

    --clr-txt: hsl(0 0% 5%);
    --clr-txt-muted: hsl(0 0% 30%);
    --clr-border: hsl(0 0% 30%);
    --clr-highlight: hsl(0 0% 100%);

    --but-theme-default: url(../img/light_icon_000.svg);
    --but-theme-toggle: url(../img/dark_icon_fff.svg);
    
    --ico-user: url(../img/user_icon_000.svg);
    
    --gradient: linear-gradient(0deg, var(--clr-bg-op) 95%, var(--clr-bg-light-op));
    --gradient-hover: linear-gradient(0deg, var(--clr-bg), var(--clr-bg-light));
    --border-card: solid 1px var(--clr-border);
    --sombra: 
        0 4px 4px hsl(0 0% 0% / .15),
        0 12px 12px hsl(0 0% 0% / .07);
}

:root:has(#theme:checked)
{
    --clr-bg-dark: hsl(0 0% 0%);
    --clr-bg: hsl(0 0% 15%);
    --clr-bg-light: hsl(0 0% 25%);

    --clr-bg-op: hsl(0 0% 5% / var(--bg-op));
    --clr-bg-light-op: hsl(0 0% 10% / var(--bg-op));

    --clr-txt: hsl(0 0% 95%);
    --clr-txt-muted: hsl(0 0% 70%);
    --clr-border: hsl(0 0% 30%);
    --clr-highlight: hsl(0 0% 60%);
    
    --ico-user: url(../img/user_icon_fff.svg);
}

@media (prefers-color-scheme: dark)
{
    :root
    {
        --clr-bg-dark: hsl(0 0% 0%);
        --clr-bg: hsl(0 0% 15%);
        --clr-bg-light: hsl(0 0% 25%);
        
        --clr-bg-op: hsl(0 0% 5% / var(--bg-op));
        --clr-bg-light-op: hsl(0 0% 10% / var(--bg-op));
        
        --clr-txt: hsl(0 0% 95%);
        --clr-txt-muted: hsl(0 0% 70%);
        --clr-border: hsl(0 0% 30%);
        --clr-highlight: hsl(0 0% 60%);
        
        --but-theme-default: url(../img/dark_icon_fff.svg);
        --but-theme-toggle: url(../img/light_icon_000.svg);
        
        --ico-user: url(../img/user_icon_fff.svg);
    }
    
    :root:has(#theme:checked)
    {
        --clr-bg-dark: hsl(0 0% 90%);
        --clr-bg: hsl(0 0% 95%);
        --clr-bg-light: hsl(0 0% 100%);

        --clr-bg-op: hsl(0 0% 95% / var(--bg-op));
        --clr-bg-light-op: hsl(0 0% 100% / var(--bg-op));

        --clr-txt: hsl(0 0% 5%);
        --clr-txt-muted: hsl(0 0% 30%);
        --clr-border: hsl(0 0% 30%);
        --clr-highlight: hsl(0 0% 100%);
        
        --ico-user: url(../img/user_icon_000.svg);
    }
}

#theme
{
    position: fixed;
    display: none;
}

.toggle-theme
{
    display: inline-block;
    width: 3rem;
    aspect-ratio: 1;
    margin: 0;
    
    cursor: pointer;
    background: var(--but-theme-default) center / cover no-repeat;
}

#theme:checked ~ * .toggle-theme
{
    background: var(--but-theme-toggle) center / contain no-repeat;
}

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

*
{
    margin: 0;
    line-height: calc(1em + .5rem);
    -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg
{
    display: block;
    max-width: 100%;
    object-fit: contain;
}

input, button, textarea, select 
{
    font: inherit;
}

select
{
    padding: 0 1rem;
}

h1, h2, h3, h4, h5, h6
{
    overflow-wrap: break-word;
    text-wrap: balance;
    border-block-end: 1px solid var(--clr-txt-muted);
}

h1 
{
    border: none;
}

h1, h2
{
    font-size: 1.4rem;
}

h3
{
    margin-block: 1rem;
}

body
{
    font-family: system-ui, sans-serif;
    color: var(--clr-txt);
    background-color: var(--clr-bg);
}

a
{
    color: inherit;
    
    &:hover
    {
        color: var(--clr-highlight);
    }
}

figure
{
    display: grid;
    place-items: center;
    
    & img,
    & object
    {
        max-height: 50vh;
        
        border: 2px solid var(--clr-txt-muted);
        border-radius: .4em;
    }
    
    & object
    {
        width: 100%;
        aspect-ratio: 1;
    }
}

input, textarea
{
    margin-block-start: .25rem;
    padding-inline: .6rem;
    line-height: 2.2;
    
    color: inherit;
    border: none;
    border-inline-start: 2px solid var(--clr-primary);
    border-block-end: 2px solid var(--clr-border);
    background-color: var(--clr-bg-dark);
    
    &:focus
    {
        outline: dotted 2px var(--clr-primary);
    }
}

textarea
{
    height: 6rem;
}

form
{
    display: grid;
    grid-auto-rows: max-content;
    grid-auto-flow: row;
    place-items: center start;
    
    & > *
    {
        width: 100%;
    }
    
    & label
    {
        display: grid;
        
        color: var(--clr-txt-muted);
        font-size: .8rem;
        
        &:has([type=checkbox])
        {
            gap: .7rem;
            grid-template-columns: max-content 1fr;
            align-items: center;
            
            font-size: 1rem;
        }
        
        & input,
        & textarea
        {
            color: var(--clr-txt);
            font-size: 1rem;
        }
    }
    
    & [type=submit],
    & button
    {
        width: max-content;
        padding: .4rem 2rem;
        
        color: #fff;
        background: var(--clr-primary);
        border: var(--border-card);
        border-top: solid 1px var(--clr-highlight);
        border-radius: .4rem;
        cursor: pointer;
        
        &:hover
        {
            color: inherit;
            background: var(--gradient-hover);
        }
    }
    
    &:has(+ table)
    {
        grid-auto-columns: max-content;
        grid-auto-flow: column;
        place-items: baseline start;
        gap: 1rem;
        margin: .5rem;
        
        & [type=submit],
        & button
        {
            padding-block: 0;
        }
    }
    
    & .row
    {
        display: flex;
        gap: 1rem;
        
        & > *
        {
            flex-grow: 1;
        }
    }
    
    @media (max-width: 999px)
    {
        & .row 
        {
            flex-direction: column;
        }
    }
}

table
{
    width: 100%;
    margin: 1rem 0;
    
    box-shadow: 0 0 20px #0001;
    border-collapse: collapse;
    border: solid 1px var(--clr-border);
    border-radius: .5rem;
}

caption
{
    caption-side: bottom;
}

.table-container
{
    width: 100%;
    overflow: auto;
}

th
{
    padding: .5rem;
    
    color: #fff;
    background-color: var(--clr-primary);
    
    font-weight: 700;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1;
    text-align: start;
    
    & input
    {
        --but-cnt: 0;
        width: calc(100% - 2rem * var(--but-cnt));
        
        color: var(--clr-txt);
        background: var(--clr-bg-op);
        
        &:has(+ label)
        {
            --but-cnt: 1;
        }
        
        &:has(+ label:nth-of-type(2))
        {
            --but-cnt: 2;
        }
    }
    
    & button
    {
        width: 1.7rem;
        aspect-ratio: 1;
        float: right;
        margin-block-start: .2rem;
    }
}

td
{
    padding: .5rem;
    text-align: center;
}

tbody 
{
    & tr:nth-child(odd)
    {
        background-color: var(--clr-bg);        
    }
    
    &:empty
    {
        position: relative;
        
        height: 6rem;
        width: 100%;
        
        &::after
        {
            content: "No se encontraron órdenes";
            position: absolute;
            top: 50%;
            left: 50%;
            translate: -50% -50%;
            
            font-weight: bold;
            font-size: 1.4rem;
            color: var(--clr-txt-muted);
        }
    }
}

thead
{
    & tr:first-of-type th
    {
        padding: .5rem .5rem 0;
    }
    
    & tr:last-of-type th
    {
        padding: 0 .5rem .5rem;
    }
    
    & tr:only-of-type th
    {
        padding: .5rem;
    }
    
    & th:last-of-type
    {
        text-align: center;
    }
}

details
{
    position: relative;
    
    & menu
    {
        position: absolute;
        top: 1.4em;
        padding: 0;
        list-style: none;
    }
}

dialog
{
    position: fixed;
    top: .6rem;
    left: 50%;
    translate: -50%;
    z-index: 1000;
    width: min(100%, 25em);
    padding: .4rem;
    padding-inline-start: 3.4rem;
    
    border: none;
    border-radius: .3rem;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: var(--sombra);
    
    animation: fade-out .7s ease-out;
    
    &.toast
    {
        color: #fff;
        background-repeat: no-repeat;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=);
        background-position: 1rem center;
        background-color: #51a351;
        
        & h2
        {
            margin-block-end: .8rem;
        }
        
        & p 
        {
            margin-block-start: .4rem;
        }
        
        &.success
        {
            background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==);        
        }
        
        &.error
        {
            background-color: #bd362f;
            background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=);
        }
    }

    &:open
    {
        display: block;
        opacity: 1;
        top: 1rem;
        
        animation: show-toast 7s ease-out forwards;
    }
    
    &.modal
    {
        flex-direction: column;
        width: min(100%, 800px);
        max-height: calc(100vh - 2rem);
        top: 50%;
        padding: 0;

        translate: -50% -50%;

        color: inherit;
        background: var(--clr-bg);
        border: none;
        border-radius: 6px;
        
        & > *:nth-child(2)
        {
            flex-grow: 1;
            overflow-y: auto;
        }
        
        &:open
        {
            display: flex;
            animation: fade-in .7s ease-out;
        }   

        & header
        {
            flex-direction: row;
            align-items: end;

            color: #fff;
            background: var(--clr-primary);

            margin-block-end: 1.6rem;

            & h2
            {
                flex-grow: 1;
            }

            & form 
            {
                padding: 0;

                & button
                {
                    width: 2.2rem;
                    aspect-ratio: 1;
                    padding: 0;

                    font-size: 1.3rem;
                    background: transparent;
                    border-radius: 50%;
                    border: none;
                }
            }
        }

        & form
        {
            padding: 0 1.4rem 2rem;

            &:invalid button.submit
            {
                pointer-events: none;
                opacity: .3;
            }
        }
    }
}

body:has(dialog.modal[open])::after
{
    content: "";
    display: block;
    position: fixed;
    z-index: 500;
    inset: 0;
    
    background-color: #000a;
    animation: fade-in .7s ease-out forwards;
}

@keyframes fade-in 
{
    0% 
    {
        opacity: 0;
        display: none;
    }

    100% 
    {
        opacity: 1;
        display: block;
    }
}

@keyframes show-toast
{
    0%
    {
        display: none;
        opacity: 0;
        top: -1rem;
    }
    
    5%,
    95%
    {
        display: block;
        opacity: 1;
        top: 1rem;
    }
    
    100%
    {
        display: none;
        opacity: 0;
        top: -1rem;
    }
}

@keyframes fade-out 
{
    0% 
    {
        opacity: 1;
        display: block;
    }

    100% 
    {
        opacity: 0;
        display: none;
    }
}

summary
{
    cursor: pointer;
    
    &::marker
    {
        content: "";
    }
}

[hidden]
{
    display: none !important;
}

.tabs
{
    & > section,
    & > section:first-of-type:has(~ section:target)
    {
        display: none;
        padding: 1.5rem .4rem;
        border-radius: .4rem;
        border-top-left-radius: 0;
    }
    
    & > section:target,
    & > section:first-of-type
    {
        display: flow-root;
        
        background: var(--clr-bg-dark);
        box-shadow: 0 -.2rem 0 var(--clr-border);
        
        scroll-margin-block-start: 15rem;
    }
    
    & > nav
    {
        display: block;
        
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;

        &::-webkit-scrollbar
        {
            display: none;
        }
        
        &:has(~ section:target) li a
        {
            color: var(--clr-txt-muted);
            background-color: transparent;
            box-shadow: 0 -.2rem 0 var(--clr-bg);
        }
        
        & li:nth-of-type(1) a,
        &:has(~ section:nth-of-type(1):target) li:nth-of-type(1) a,
        &:has(~ section:nth-of-type(2):target) li:nth-of-type(2) a,
        &:has(~ section:nth-of-type(3):target) li:nth-of-type(3) a
        {
            color: inherit;
            background-color: var(--clr-bg-dark);
            box-shadow: 0 -.2rem 0 var(--clr-border);
        }
        
        & ul
        {
            list-style: none;
            display: flex;
            gap: .4rem;
            padding: 0;

            & li a
            {
                display: block;
                padding: .8rem 1.5rem .5rem;

                color: var(--clr-txt-muted);
                text-decoration: none;
                font-weight: bold;

                border-top-left-radius: .4rem;
                border-top-right-radius: .4rem;
                
                transition: background-color .6s;
                
                &:hover, 
                &:focus
                {
                    outline: none;
                    color: var(--clr-txt);
                    background-color: var(--clr-bg-dark);
                }
            }
        }
    }
}

.paginacion
{
    width: min(100%, 600px);
    margin: 0 auto;
    padding: 0;
    grid-template-columns: 1fr 1fr;
    place-content: center;
    gap: 0 1rem;
    
    & > label
    {
        width: min(100%, 11rem);
        padding: 0;
        place-self: end;
    }
    
    & > p 
    {
        place-self: end start;
        width: max-content;
    }


    & > fieldset
    {
        grid-row: 1;
        grid-column: span 2;
     
        display: grid;
        grid-template-columns: max-content 1fr max-content;
        place-content: center;
        place-items: center;
        gap: .4rem;
        
        border: none;
            
        & button
        {
            padding: .2rem .5rem;

            &[disabled]
            {
                pointer-events: none;
                color: inherit;
                background: var(--gradient-hover);
                outline: solid 2px yellow;
            }
        }
        
        & .pages
        {
            display: flex;
            gap: inherit;
            padding: .2rem;
            max-width: 100%;
            
            overflow: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            -ms-overflow-style: none;

            &::-webkit-scrollbar
            {
                display: none;
            }
        }
        
        & > button
        {
            font-size: 1.4rem;
            padding-inline: 1.4rem;

            &[disabled]
            {
                opacity: .4;
            }
        }
    }
}

.actions
{
    display: flex;
    gap: .6rem;
    justify-content: space-between;
    align-items: center;
    flex-direction: row-reverse;
    margin: 1rem 0;
    padding: 0 1rem;
}

.tabs > section
{
    & .actions 
    {
        & .uncheck-all
        {
            display: none;
        }
        
        & .check-all,
        & .uncheck-all
        {
            text-decoration: underline;
            align-self: end;
            
            cursor: pointer;
        }
        
        & form.lote
        {
            display: none;
            flex-grow: 1;
            
            [type=submit]
            {
                display: inline-flex;
                height: 2rem;
                align-items: center;
                padding: 0 1rem;
            }
            
            &:has(option[value=""]:checked) [type=submit]
            {
                display: none;
            }
            
            & label
            {
                width: max-content;
            }
        }
    }
    
    &:has(tbody input:checked) .actions 
    {   
        & form.lote
        {
            display: flex;
        }
    }
    
    &:has(.checkall:checked)
    {
        & .uncheck-all
        {
            display: block;
        }
        
        & .check-all
        {
            display: none;
        }
    }
}

[data-type=actions] input:is([type=checkbox], [type=radio])
{
    display: none;
}

.aprobacion, 
.rechazo,
.lote
{
    & p 
    {
        margin: 1.6rem auto 1rem;
        text-align: center;
    }
    
    & form .idOrden
    {
        display: inline-block;
        padding: .1rem .5rem;
        margin-inline: .2rem;

        font-weight: bold;
        line-height: 2;
        background: var(--clr-bg-dark);
    }
    
    & ul
    {
        padding: 0;
    }
    
    & .warning
    {
        width: calc(100% - 2rem);
        max-width: 600px;
        margin-block-end: 0;
        padding: 1rem;
        
        color: #fff;
        background: linear-gradient(135deg, var(--clr-danger), var(--clr-primary) 4rem);
        box-shadow: var(--sombra);
        border: solid .15rem var(--clr-primary);
        border-radius: .3rem;
        font-weight: 600;
        text-wrap: balance;
        
        & + p 
        {
            margin-block-start: .4rem;
        }
    }
    
    & .condiciones
    {
        max-height: 40vh;
    }
    
    & .actions
    {
        justify-content: center;
    }
    
    & :is(header, .actions) .accion
    {
        text-transform: capitalize;
    }
}

.orden
{
    & fieldset
    {
        padding: .8rem;
        
        border-color: var(--clr-border);
    }
}

.condiciones
{
    padding: .7rem;
    overflow: auto;
    
    border: var(--border-card);
    
    & li 
    {
        margin: 1rem .4rem;
    }
}

.icon-user, .icon-aprove, .icon-deny,
.icon-view, .icon-download, .icon-excel
{
    display: inline-block;
    width: 1.3em;
    aspect-ratio: 1;
    background: var(--ico-user) center / contain no-repeat;
}

    .icon-aprove
    {
        background-image: url(../img/aprove_icon_fff.svg);
    }

    .icon-deny
    {
        background-image: url(../img/deny_icon_fff.svg);
    }

    .icon-view
    {
        background-image: url(../img/view_icon_fff.svg);
    }

    .icon-download
    {
        background-image: url(../img/download_icon_fff.svg);
    }

    .icon-excel
    {
        background-image: url(../img/excel_icon_fff.svg);
    }

.loading tbody,
.loading dialog
{
    &::after
    {
        content: "";
        display: grid;
        place-content: center;
        position: absolute;
        z-index: 10;
        inset: 0;
        translate: 0;
        
        color: #fff;
        background: #000a;
        font-weight: bold;
        font-size: 1.4rem;
    }
    
    &::before 
    {
        content: "";
        display: block;
        position: absolute;
        z-index: 20;
        top: 50%;
        left: 50%;
        translate: -50%;
        height: 20px;
        width: 140px;
        
        background-image: 
            linear-gradient(#FFF 20px, transparent 0), 
            linear-gradient(#FFF 20px, transparent 0), 
            linear-gradient(#FFF 20px, transparent 0), 
            linear-gradient(#FFF 20px, transparent 0);
        background-repeat: no-repeat;
        background-size: 20px auto;
        background-position: 0 0, 40px 0, 80px 0, 120px 0;
        
        animation: loader 1s linear infinite;
    }
}

.loading tbody
{
    position: relative;
}

.filtros
{
    &:has([value=desc]:checked)
    {
        & .desc
        {
            display: none;
        }
    }
    
    &:has([value=asc]:checked)
    {
        & .asc
        {
            display: none;
        }
    }
}

.order
{
    display: inline-grid;
    place-items: center;
    width: 1.6rem;
    aspect-ratio: 1;
    
    color: var(--clr-primary);
    background: #fff;
    border-radius: 50%;
    font-size: 1rem;
    cursor: pointer;
    
    & input[type=radio]
    {
        display: none;
    }
    
    &:has(:checked)
    {
        display: none;
    }
    
    &.by
    {
        color: #fff;
        background: #fff3;
        width: 1.6rem;
        
        &:not(:has(:checked)) ~ .order 
        {
            display: none;
        }
        
        &::after 
        {
            display: inline-block;
            content: '';
            width: 1rem;
            aspect-ratio: 1;
            
            background: center / contain url(../img/order_icon_fff.svg) no-repeat;
        }
    }
}

@keyframes loader 
{
    0% 
    {
        background-image: 
            linear-gradient(#FFF 20px, transparent 0), 
            linear-gradient(#FFF 20px, transparent 0), 
            linear-gradient(#FFF 20px, transparent 0), 
            linear-gradient(#FFF 20px, transparent 0); 
    }

    25% 
    {
        background-image: 
            linear-gradient(var(--clr-primary) 20px, transparent 0), 
            linear-gradient(#FFF 20px, transparent 0), 
            linear-gradient(#FFF 20px, transparent 0), 
            linear-gradient(#FFF 20px, transparent 0); 
    }

    50% 
    {
        background-image: 
            linear-gradient(#FFF 20px, transparent 0), 
            linear-gradient(var(--clr-primary) 20px, transparent 0), 
            linear-gradient(#FFF 20px, transparent 0), 
            linear-gradient(#FFF 20px, transparent 0); 
    }

    75% 
    {
        background-image: 
            linear-gradient(#FFF 20px, transparent 0), 
            linear-gradient(#FFF 20px, transparent 0), 
            linear-gradient(var(--clr-primary) 20px, transparent 0), 
            linear-gradient(#FFF 20px, transparent 0); 
    }

    100% 
    {
        background-image: 
            linear-gradient(#FFF 20px, transparent 0), 
            linear-gradient(#FFF 20px, transparent 0), 
            linear-gradient(#FFF 20px, transparent 0), 
            linear-gradient(var(--clr-primary) 20px, transparent 0); 
    }
}

.download-excel [type=submit]
{
    display: inline-flex;
    align-items: center;
    padding: 0 1rem;
    
    & .icon-excel
    {
        width: 2rem;
        margin-inline-end: .3rem;
    }
    
    @media (min-width: 900px)
    {
        &::after
        {
            content: attr(aria-label);
        }
    }
}

@layer base
{
    header
    {
        display: flex;
        gap: 1rem;
        align-items: center;
        padding: 1rem 2rem;

        background: var(--clr-bg);
        box-shadow: var(--sombra);
        
        @media (max-width: 999px)
        {
            flex-direction: column;
        }
        
        & h1
        {
            flex-grow: 1;
        }
        
        & img
        {
            width: min(20vw, 200px);
            max-height: 3rem;
        }
    }
    
    footer
    {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 2rem;

        @media (max-width: 999px)
        {
            flex-direction: column;
            align-items: start;
        }
    }

    label
    {
        &:has([type=checkbox])
        {
            display: inline-block;
            font-size: 1rem;
            cursor: pointer;

            & input
            {
                display: none;
            }

            &::after
            {
                content: "";
                display: block;
                width: 1.2rem;
                aspect-ratio: 1;

                border: .15rem solid currentColor;
                border-radius: .2rem;
                background: transparent;
            }
        }

        &:has([type=checkbox]:checked)
        {
            &::after
            {
                background: var(--clr-primary);
                box-shadow: inset 0 0 0 .15rem var(--clr-bg);
            }
        }
    }
}