@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');:root{--contrast:#2e2e2e;--contrast-2:#626263;--contrast-3:#c9c9cb;--base:#EDEDEF;--base-2:#f5f5f5;--base-3:#ffffff;--accent:#de092e}html{width:100%;height:100%;}body{font-family:'Poppins',sans-serif;margin:0;padding:0;width:100%;min-height:100%;box-sizing:border-box;background:var(--base);color:var(--contrast);}h1,h2,h3{color:var(--accent);}.page-demo{max-width:96%;width:800px;margin:0 auto;padding:0 0 50px;}.app-container{margin:20px auto;padding:20px;width:800px;max-width:96%;background:var(--base-3);border-radius:20px;}.button-collection{display:flex;flex-wrap:wrap;justify-content:center;justify-items:space-between;gap:20px;margin:40px 0;& button{padding:10px 20px;border:none;border-radius:5px;background-color:var(--accent);color:var(--base);cursor:pointer;font-size:1rem;&:hover{background-color:var(--contrast);color:var(--base);opacity:1}&.discreet{padding:6px 10px;margin:0 auto;font-size:.9rem;width:80%;opacity:.7;background-color:var(--contrast-2);&:hover{opacity:1}}}}.user-parameters{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;& div{border:1px solid var(--contrast)}& label{display:block;padding:10px;text-align:center;background:var(--contrast-3)}& input,select{box-sizing:border-box;width:100%;padding:10px;border:none;background:var(--base-3);text-align:center}}.question-set{display:grid;background:var(--base-3);grid-template-columns:repeat(2,1fr);gap:5px;& section:nth-of-type(1){grid-area:1 / 1 / 2 / 3}& section:nth-of-type(2){grid-area:2 / 1 / 3 / 3;margin-bottom:10px}}.progress-indicator{margin:20px 0 10px;display:grid;grid-template-columns:190px 1fr;font-size:24px;align-items:center;justify-content:center;text-align:center;}.progress-bar{height:20px;width:100%;background-color:var(--base);border-radius:15px;overflow:hidden;}.progress-inner{height:100%;width:100%;background-color:var(--accent);content:'';transform-origin:left center;transform:scaleX(.05);transition:transform .4s;}#questions{height:230px;overflow-y:scroll;}.question{margin:20px;display:grid;grid-template-columns:40px 1fr;border-radius:20px;overflow:hidden;background-color:var(--base);opacity:1;transition:opacity .5s;&>div:nth-of-type(1){font-size:24px;display:flex;align-items:center;justify-content:center;text-align:center;background-color:var(--accent);color:var(--base)}&>div:nth-of-type(2){padding:10px}&.answered{display:none;pointer-events:none}& .answers{float:right}& button{margin:10px;padding:10px;min-width:40px;border:none;background-color:var(--accent);color:var(--base);cursor:pointer;&:hover{background-color:var(--contrast-2);color:var(--base)}&.selected{border:2px solid var(--contrast)}&:disabled{opacity:.5;cursor:not-allowed}}}@starting-style{.question{opacity:0}}.answer-block .button-collection{margin:0 0 15px;}.questions-inactive{display:none;height:10px}.respuesta-inactive{display:none}#questionnaire_result{margin:20px 0;font-size:1.1rem;text-align:center;font-weight:700;& .error{display:block;text-align:center;font-weight:400;font-size:1rem;color:var(--accent)}}dialog{width:clamp(50%,80%,400px);padding:20px;border:none;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.25);background:var(--base-3);}dialog::backdrop{background:rgba(0,0,0,.5);}.popup-content{display:flex;flex-direction:column;align-items:center;}.close-popup{align-self:flex-end;background:var(--accent);color:var(--base-3);padding:3px 12px;border-radius:5px;border:none;font-size:1.25rem;cursor:pointer;}@media (max-width:600px){.app-container{width:96%;padding:5px}.button-collection{flex-direction:column;gap:10px}.user-parameters{grid-template-columns:repeat(2,1fr)}.question-set{grid-template-columns:1fr;gap:10px}.question{margin:0 0 15px;font-size:.9rem;& p{margin:0}}.question .answers button{margin:10px 9px 5px;padding:5px;font-size:1rem;font-weight:600}.answer-block .button-collection{gap:10px}dialog{width:90%;padding:10px}.close-popup{font-size:1rem}}