/*
INVOICE PARSER
VERSION 3.0
DATESTAMP: 2026-03-17T11:03:00-06:00
by FHT
*/

@property --gradient-per {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%;
}
@property --gradient-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}
:root {
    color-scheme: dark;
    --font-body:
        "Cabin", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
        "Open Sans", "Helvetica Neue", sans-serif;
    --font-head: "SpaceGrotesk", sans-serif;
    --font-mono: "Agave Nerd Font Mono", monospace;
    --color-back: oklch(17.629% 0.01404 258.383);
    --color-back-hi: oklch(from var(--color-back) calc(l + 0.06) c h);
    --color-font: oklch(95.514% 0.00011 271.152);
    --color-font-lo: oklch(from var(--color-font) calc(l - 0.22) c h);
    --color-vstd: oklch(73.983% 0.15793 49.886);
    --color-head: oklch(86.065% 0.03511 78.618);
    --color-high: oklch(87.282% 0.24798 148.744);
    --color-fhtgames: oklch(54.757% 0.22283 29.036);
    --wrap-wdth: min(90vw, 62.5rem);
}
.grid {
    display: grid;
}
.flex {
    display: flex;
}
.wrap {
    width: var(--wrap-wdth);
    margin-inline: auto;
}
img,
svg {
    display: block;
    max-width: 100%;
}
a {
    text-underline-offset: 0.25em;
}
a:visited {
    color: var(--color-vstd);
}
.navi {
    list-style: none;
    margin: 0;
    padding: 0;
}
.align-center {
    text-align: center;
}
.strong {
    font-weight: 700;
}

body {
    grid-template-rows: auto 1fr auto;
    min-height: 100svh;
    background-color: var(--color-back);
    font-family: var(--font-body);
    color: var(--color-font);
}

/*****HEADER*****/
header {
    background-color: var(--color-fhtgames);
    & .wrap {
        grid-template-columns: auto 1fr;
        align-items: center;
    }
}
.header-logo {
    height: 1.5rem;
    width: auto;
    margin-right: 2rem;
    filter: drop-shadow(5px 5px 0 hwb(0 0% 100% / 0.4));
    transition: filter 200ms ease-in;
    & path {
        fill: white;
    }
}
.header-logo:hover,
.header-logo:focus-visible {
    filter: drop-shadow(5px 5px 0 hwb(0 0% 100% / 0.8));
}
.main-nav {
    gap: 0.3rem;
    font-weight: 700;
    & a {
        text-decoration: none;
        color: var(--color-font);
    }
    & li {
        padding: 1.2em 0.5em;
        background: linear-gradient(180deg, var(--color-fhtgames) var(--gradient-per), var(--color-back) 30%);
        transition: --gradient-per 200ms ease-in;
    }
    & li:hover,
    .active-li {
        --gradient-per: 5%;
    }
}

main {
    padding-inline: 1rem;
}
h1 {
    font-family: var(--font-head);
    color: var(--color-head);
}
h2 {
    font-size: 1.3rem;
    padding-bottom: 0.3em;
    border-bottom: 2px solid var(--color-back-hi);
}
.licencia {
    line-height: 1.4;
}

/***Alerts***/
.alert {
    grid-auto-flow: row;
    grid-auto-rows: auto;
    gap: 0.5em;
    padding: 0.6rem 1rem;
    margin-bottom: 1rem;
    background-color: var(--color-back-hi);
    font-size: 0.9rem;
    & p {
        margin: 0;
    }
}
.alert > :first-child {
    display: flex;
    place-items: center;
    font-weight: 300;
}
.alert .button-area {
    grid-row: span 2;
    place-self: center;
}
.alert-icon {
    height: 1.6rem;
}
.alert_tip {
    border-left: 4px solid var(--color-high);
}
.alert_tip > :first-child {
    color: var(--color-high);
}
.icon-tip {
    fill: var(--color-high);
}

/***Dropzone***/
#drop-zone {
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem;
    border: 0.190rem dashed var(--color-back-hi);
    text-align: center;
    color: #ddd;
    margin-block: 1rem;
    align-items: center;
    justify-content: center;
}

#drop-zone p {
    margin: 0;
}

#drop-zone.dragover {
    border-color: var(--color-high);
    color: var(--color-high);
}

#upload-button {
    background:
        linear-gradient(var(--color-fhtgames),var(--color-fhtgames)),
        linear-gradient(var(--gradient-angle),var(--color-fhtgames) 25%,oklch(from var(--color-fhtgames) calc(l + 0.5) c h) 50%,var(--color-fhtgames) 75%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    color: white;
    font-weight: 700;
    padding: 0.6rem 1.5rem;
    border: 0.200em solid transparent;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: translate 70ms ease;
    flex-shrink: 0;
    animation: glow 10s linear infinite;
}
#upload-button:hover,
#upload-button:focus-visible {
    translate: 0 -3px;
}

#app-title {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
}

#invoice-type {
    display: block;
    font-family: var(--font-head);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-back);
    line-height: 1;
    padding: 0.7em 1em;
    background-color: var(--color-vstd);
    border-radius: 0.3em;
    text-shadow: 1px 1px 0 hwb(0 100% 0% / 0.3);
}
#invoice-type:empty {
    display: none;
}

#output {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    white-space: pre-wrap;
    margin-block: 1rem;
}

.product-info {
    --prod-color-1: hwb(220 22% 75%);
    --prod-color-2: hwb(41 12% 13%);
    --prod-color-3: hwb(341 20% 69%);
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr auto;
    border-radius: 0.8rem;
    background-color: var(--color-back-hi);
    overflow: hidden;
}
.product-number {
    font-size: 0.9rem;
    padding: 0.5rem;
    background-color: var(--prod-color-1);
    min-width: 3ch;
    align-content: center;
    text-align: center;
}
.product-name {
    position: relative;
    padding: 1.7rem 0.5rem 0.5rem;
}
.product-name::before {
    content: "Nombre del Producto:";
    position: absolute;
    color: var(--prod-color-2);
    top: 0.5rem;
    left: 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
}
.product-cabys {
    grid-column: 1 / 3;
    position: relative;
    isolation: isolate;
    background-color: var(--prod-color-3);
    font-family: var(--font-mono);
    font-size: 1.3rem;
    text-align: center;
    padding-block: 0.7rem;
    cursor: pointer;
    overflow: hidden;
}
.product-cabys::before {
    content:"CAByS";
    position: absolute;
    right: 0;
    bottom: 50%;
    z-index: -1;
    translate: 0.5rem 50%;
    font-size: 5rem;
    font-weight: 700;
    color: hwb(0 100% 0% / 6%);
}

/*****FOOTER*****/
footer {
    padding-block: 1rem;
    margin-top: 1rem;
    background-color: var(--color-back-hi);
    font-size: 0.8rem;
    color: var(--color-font-lo);
}
.footer-logo {
    height: 1.5rem;
    width: auto;
    filter: drop-shadow(0.25em 0.25em 2px hwb(0 0% 100% / 0.7));
    & path {
        fill: var(--color-font);
    }
}

/***Copy Message***/
.copy-message {
    background-color: var(--color-vstd);
    color: var(--color-font);
    padding: 8px 15px;
    border-radius: 5px;
    font-size: 0.9rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    animation: fadeInOut 2s ease-in-out forwards;
}

/**Animations**/
@keyframes glow {
    100% {
        --gradient-angle: 360deg;
    }
}
@keyframes fadeInOut {
    0% { opacity: 0; transform: translateY(10px); }
    10% { opacity: 1; transform: translateY(0); }
    90% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-10px); }
}

/* Desktop Version */
@media (width > 600px) {
    #drop-zone {
        flex-direction: row;
        gap: 1.5rem;
        padding: 1rem;
    }
    #output {
        grid-template-columns: 1fr 1fr;
    }
}