/*
Theme Name: GeneratePress - Child
Version: 3.3.1
Author: Fernando Rodríguez de Tembleque Jiménez
Template: generatepress
*/

:root{

    /** Headers backgrounds */
    --bg-mobile: url('../../../images/mobile.png');
    --bg-tablet: url('../../../images/tablet.png');
    --bg-desktop: url('../../../images/desktop.png');

    /** Colores evento */
    --color_1: #00124F;
    --color_2: #98ABBA;
    --color_3: #B68618;

    /** Colores comunes */
    --white_01: #FFFFFF;
    --grey_01: #F8F8F8;
    --grey_02: #CCCCCC;
    --grey_03: #727272;
    --grey_04: #3C3C3C;


    --doctaforum-color: #97C579;
    --dark: #333;

    /* Esto es una variable para un background overlay con opacidad del color --primary*/
    --overlay-responsive: rgba(0, 0, 0, 0.89);
    --vertical-separator: 32px;
    --side-separator: 26px;

    /** Fuentes */
    --font-APTOS: 'Aptos', sans-serif;
    --font-primary: 'Montserrat';
    --font-secondary: 'Montserrat';
    
    /* Font sizes */
    --font-xxs: 0.625rem;    /* 10px */
    --font-xs: 0.75rem;    /* 12px */
    --font-sm: 0.875rem;   /* 14px */
    --font-base: 1rem;     /* 16px */
    --font-md: 1.125rem;   /* 18px */
    --font-lg: 1.25rem;    /* 20px */
    --font-xl: 1.5rem;     /* 24px */
    --font-2xl: 2rem;      /* 32px */
    --font-3xl: 2.5rem;    /* 40px */

}

*{
    scrollbar-width: thin;
    scrollbar-color: var(--color_1) var(--color_2);
    margin: 0;
    padding: 0;
}

p, h1, h2, h3, h4, h5, h6{ 
    margin: 0; 
    padding: 0; 
}

body{
    position: relative;
    background-color: var(--grey_01);
    font-family: var(--font-primary);
    min-height: 100vh;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    clear: both;
} 

body.menu-open, body.modal-isOpen {
    overflow: hidden;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset; /* tu color de fondo */
    -webkit-text-fill-color: var(--color_1); /* tu color de texto */
    transition: background-color 5000s ease-in-out 0s;
}

.content-area{
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.bg-color_1{
    background-color: var(--color_1);
}

.bg-color_2{
    background-color: var(--color_2);
}

.bg-color_3{
    background-color: var(--color_3);
}

.bg-grey_1{
    background-color: var(--grey_01);
}

.proximamente{
    color: var(--color_1);
    font-family: var(--font-secondary);
    font-size:  var(--font-3xl);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.btn-platforms{
    display: flex;
    width: fit-content;
    height: 36px;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: var(--color_1);
    cursor: pointer;
    text-decoration: none;

    color: var(--white_01);
    font-family: var(--font-primary);
    font-size: var(--font-base);
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}
.btn-platforms:hover, .btn-platforms:active, .btn-platforms:focus{ 
    background: var(--color_2); 
    color: var(--white_01);
}

.btn-platforms:has(svg) svg path,
.btn-platforms:has(svg):hover svg path, .btn-platforms:has(svg):active svg path, .btn-platforms:has(svg):focus svg path{ 
    stroke: var(--white_01) !important; 
}

/** Complianz buttons */
button.cmplz-btn.cmplz-accept{
    font-family: var(--font-primary) !important;
    border-color: var(--color_2) !important;
    background-color: var(--color_2) !important;
    color: var(--grey_01) !important;
}

/** Botónes de minimizar , ver y guardar preferencias */
button.cmplz-btn.cmplz-deny,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences
{
    font-family: var(--font-primary) !important;
    border-color: var(--color_1) !important;
    background-color: transparent !important;
    color: var(--color_1) !important;
}

.cmplz-cookiebanner .cmplz-categories .cmplz-category{
    background: transparent !important
}
.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-icon.cmplz-open{
    height: 100% !important;
    display: flex !important;
}

.swal2-popup{
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.swal2-styled{
    border: 0;
    border-radius: 0;
    background: initial;
    background-color: transparent;
    color: #fff;
    font-size: 1em;
}

.swal2-popup .swal2-title{
    font-family: var(--font-primary);
    font-size: var(--font-lg);
    color: var(--color_1);
    font-weight: 700;
    margin: 0;
}

.swal2-popup .swal2-html-container
{
    font-family: var(--font-primary);
    font-size: var(--font-base);
    color: var(--grey_04);
    font-weight: 400;
    margin: 0;
    text-align: inherit;
}

.swal2-popup .swal2-actions{
    margin: 0;
    display: flex;
    justify-content: flex-end;
    gap: 32px;
    font-family: var(--font-primary);
    font-size: var(--font-base);
    color: var(--grey_04);
    font-weight: 400;
    margin: 0;
    text-align: inherit;
}
.swal2-popup .swal2-actions:has(> .loader-isActive){
    justify-content: center;
}

.swal2-loader{
    border-color: var(--color_3) transparent var(--color_3) transparent !important;
}

.swal2-popup .swal2-actions button{
    font-family: var(--font-primary);
    font-size: var(--font-base);
    color: var(--white_01);
    font-weight: 400;
    border: none;
    background-color: var(--color_1);
    padding: 8px 16px;
    border-radius: 8px;
    margin: 0;
}

.swal2-popup .swal2-actions button:focus, 
.swal2-popup .swal2-actions button:focus-visible,
.swal2-popup .swal2-actions button:active{
    border: none;
    outline: none;
    box-shadow: none;
}

@media (min-width: 768px) {
    :root{
        --side-separator: 80px;
    }
}

@media (min-width: 992px) {
    :root{
        --vertical-separator: 160px;
        /* --side-separator: 320px; */
    }

    .content-area{
        min-height: calc(100vh - 140px);
    }

}

@media (min-width: 1200px) {
    :root{
        --side-separator: 100px;
    }
}

@media (min-width: 1480px) {
    :root{
        --side-separator: 160px;
    }
}

@media (min-width: 1600px) {
    :root{
        --side-separator: 220px;
    }
}


@media (min-width: 1800px) {
    :root{
        --side-separator: 320px;
    }
}