/* css vars */
:root {
    --page_width: 800px;
    --page_height: 1280px;
    --page_bgcolor: #FFFFFF;
    --page_textcolor: #000;
    --page_maincolor: #1F8496;
    --page_alternatecolor:#D83232;
}

* {box-sizing:border-box;}
body {
    margin:0; padding:0; font-family: Arial, sans-serif; line-height: 1.5;  font-size: 23px;
    background:var(--page_bgcolor) url('loading.gif') no-repeat center; background-size: 50px;
    color: var(--page_textcolor);
}

/* LAYOUT */
.page, .pantalla {width:var(--page_width); height: var(--page_height); overflow: hidden;}
.page {position: relative; margin:0 auto;}
.pantalla {display:none; opacity: 0; position: absolute; top: 0; left: 0; padding:150px 75px;}
.pantalla.active {display:block; opacity: 1; position: relative;}

/* PANTALLAS */
#portada a {display: block; background:url('portada.jpg') no-repeat center; background-size: contain;}
#intro, #resultado {padding-top:450px; background:url('formulario.jpg') no-repeat center; background-size: contain;}
#primero, #segundo, #ticket, #resultado {background:url('formulario.jpg') no-repeat center; background-size: contain;}
#primero, #resutlado {padding-top:400px;} #segundo, #ticket {padding-top:350px;}
#message {text-align: center;}

/* FORMULARIO */
#formulario .form_input, #formulario .form_select {margin-bottom:35px;}  
#formulario .form_check {margin-bottom:20px;}
#formulario .form_buttons {margin-top: 50px;}  

#formulario input[type="text"], #formulario input[type="number"], #formulario input[type="tel"], #formulario input[type="email"], 
#formulario input[type="date"], #formulario select, #formulario textarea {
    display:block; width:100%; padding:15px 20px; margin-top:10px;  font-size:23px;
    border-radius:10px; outline:none!important; border:none!important;
}
#formulario input[type="checkbox"] {width: 16px; height: 16px; transform: scale(1.2); cursor: pointer;}

#formulario .form_date .label {display: block!important;}
#formulario select#dia, #formulario select#mes, #formulario select#ano {width: 30%; display: inline-block;}

#formulario #ticket h2 {font-size: 2.3rem; color:var(--page_maincolor)}
#formulario #ticket h2 + p {margin-bottom: 50px;}

#formulario .form_check {font-size:18px;}
#formulario .form_check a {text-decoration: underline;}

#formulario span.error {display: block; margin: 0; font-size: 18px; padding: 0 10px;}

/* COLORS */
#formulario input[type="text"], #formulario input[type="number"], #formulario input[type="tel"], #formulario input[type="email"], 
#formulario input[type="date"], #formulario select, #formulario textarea {background-color:#dedede; color:#333;}
#formulario input::placeholder {color:#999!important;}
#formulario input[type="text"]:focus, #formulario input[type="email"]:focus {color:#333;}
#formulario .form_check a {color: var(--page_textcolor);}
#formulario .form_check a:hover {color: var(--page_maincolor) ;}
#formulario #ticket h2, #formulario #resultado h2 {background-color:var(--page_alternatecolor); color: #fff; padding: 0 15px;}


#formulario button, #formulario a.button, #index_button {
    display:inline-block; padding:1rem; margin-right: 10px; outline:none!important; 
    font-size: 1.2rem; border-radius:10px; cursor:pointer; text-transform:uppercase; text-decoration: none; 
    border: 2px solid var(--page_maincolor);
}
#formulario button:hover, #formulario a.button:hover, #index_button:hover {border: 2px solid var(--page_alternatecolor);}
#formulario .button_next, #formulario .button_next, #index_button {background-color:var(--page_maincolor); color:#fff;}
#formulario .button_next:hover, #index_button:hover {background-color: var(--page_alternatecolor);}
#formulario .button_prev {color: var(--page_maincolor); background-color:var(--page_bgcolor);}
#formulario .button_prev:hover {color: var(--page_alternatecolor); }
#formulario span.error {background-color: #dc3545; color: #fff;}


#formulario select#dia + span.error, #formulario select#mes + span.error {display: none!important;}
#formulario .response_error, #formulario .response_warning {background-color: #dc3545; padding: 10px 15px; border-radius: 10px;}


/* POP-UP */
#popup-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5);
}
#popup-container {
    display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 80%; height: 80%; max-width: calc(var(--page_width) - 50px); overflow: auto;
    background: white; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
#popup-inside {position: relative; padding: 20px;}
#popup-close {
    position:fixed; top:0; right:0; display:block; width: 50px; height: 50px; 
    background-color: #000; color: #fff; border: none; cursor: pointer;
    font-size:18px; font-weight: bold;
}
#popup-close:hover {font-size: 21px;}