:root {
    --background-main: #d2ccba;
    --background-from: #bfbfbf;
    --text: #2f2c27;
    --accent: #798d6e;
    --dropzone: #99a289;
    --dropzone-border: #4D6D48;
    --dropzone-error: #f26254;
    --dropzone-border-error: #ab0000;
    --share-hover: #b0aa9c;
}

@font-face {
    font-family: 'Galada';
    src: url(../fonts/Galada-Regular.ttf) format('woff2');
}

@font-face {
    font-family: 'Poppins';
    src: url(../fonts/Poppins-Regular.ttf) format('woff2');
}

html {
    background: border-box;
    font-size: 12px;
}

body {
    margin: 0;
    padding: 0;
    background: -webkit-gradient(linear, left top, left bottom, from(var(--background-from)), to(var(--background-main))) border-box;
    background: -o-linear-gradient(top, var(--background-from), var(--background-main)) border-box;
    background: linear-gradient(to bottom, var(--background-from), var(--background-main)) border-box;
    min-height: 100vh;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

a {
    color: var(--dropzone-border);
}

.hidden { 
    display: none !important; 
}

.default-background {
    background: inherit !important;
}

/* Pantalla de carga */
#upload-screen {
    font-family: "Poppins", serif;
    font-weight: 300;
    color: var(--text);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
    -webkit-transition: background-color 0.3s, color 0.3s;
    -o-transition: background-color 0.3s, color 0.3s;
    transition: background-color 0.3s, color 0.3s;
}

#upload-container {
    text-align: center;
    width: 85%;
}

#logo {
    width: 100%;
}

h1 {
    font-size: 5rem;
    margin: 0;
    font-family: "Galada", serif;
    font-style: normal;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.description {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 20px;
}

.dropzone {
    padding: 40px;
    border: 3px dashed var(--dropzone-border);
    border-radius: 12px;
    cursor: pointer;
    background-color: var(--dropzone);
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    font-size: 1.1rem;
    font-weight: 300;
}

.dropzone:hover {
    background-color: var(--accent);
}

.dropzone.dragover {
    -webkit-box-shadow: 1px 0px 20px 10px #00000026;
            box-shadow: 1px 0px 20px 10px #00000026;
    background-color: var(--accent);
}

.dropzone.error {
    background-color: var(--dropzone-error) !important;
    border: 3px dashed var(--dropzone-border-error);
}

.top-left-icons {
    position: absolute;
    top: 20px;
    left: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 15px;
}

/* Pantalla de Swagger */
.top-bar {
    background-color: var(--background-main);
    -webkit-transition: background-color 0.3s, color 0.3s;
    -o-transition: background-color 0.3s, color 0.3s;
    transition: background-color 0.3s, color 0.3s;
    position: fixed; 
    top: 0; 
    left: 0; 
    width: calc(100% - 40px);
    padding: 10px 20px; 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-pack: justify; 
        -ms-flex-pack: justify; 
    justify-content: space-between; 
    -webkit-box-align: center; 
        -ms-flex-align: center; 
            align-items: center;
    z-index: 10;
}

#swagger-container {
    margin-top: 50px; 
    padding: 10px; 
}

#backButton {
    font-family: "Galada", serif;
    font-size: 1.6rem;
    color: var(--text);
    cursor: pointer;
    font-size: 1.5rem;
    border: none;
    background: transparent;
}

#shareButton {
    cursor: pointer;
    border: none;
    background: transparent;
    -webkit-transition: background-color 0.3s, color 0.3s;
    -o-transition: background-color 0.3s, color 0.3s;
    transition: background-color 0.3s, color 0.3s;
    border-radius: 50%;
}

#shareButton svg {
    fill: var(--text);
    width: 24px;
    height: 24px;
    padding: 8px 6px 7px 4px;
}

#shareButton:hover {
    background-color: var(--share-hover);
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-from: #445784;
        --background-main: #1E2A47;
        --text: #EAE0D5;
        --accent: #0d6f54;
        --dropzone: #19504e;
        --dropzone-border: #10D6A1;
        --dropzone-error: #9B2C2C;
        --dropzone-border-error: #C65F5F;
        --share-hover: #53596c;
    }
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }

    #logo {
        width: 450px;
    }

    #upload-container {
        max-width: 600px;
    }
}

@media (min-width: 1024px) {
    html {
        font-size: 16px;
    }

    #upload-container {
        max-width: 800px;
    }
}