/*▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁*/
/* 🎠                                                                                                                    */
/*▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔*/

html,body,
div,span,
p,header,section,footer,nav,aside,
em,strong,mark,
ol,ul,li,dl,dt,dd,
h1,h2,h3,h4,h5,h6,hgroup,
img,a,
form,label,
article,blockquote,
address,time,abbr,dfn,code,samp,output,kbd,var,s,del,ins,u,i,
table,caption,thead,tbody,tfoot,tr,th,td,
audio,video,
canvas,iframe{ margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline; }
article,aside,footer,header,hgroup,nav,section{ display:block; }
body,input,output,label,textarea,button{ line-height:1.2; font-family:sans-serif; font-size:12px; }
ol,ul{ list-style:none; }
table{ border-collapse:collapse; border-spacing:0; }
* { box-sizing: border-box; background-size: 100% 100%; background-repeat: no-repeat; background-position: center; }
del,ins,a,s,u{ text-decoration:none; }
button{ border:none; background:white; padding:0; font-family:inherit; cursor:pointer; }
mark{ background:none; color:inherit; }
iframe,textarea,button,img,canvas,video,ol,ul,li{ display:block; }
label,span,a{ display:inline-block; }
.displayblock { display: block !important; } .display_block { display: block; }
.displayinlineblock { display: inline-block !important; } .display_inline_block { display: inline-block; }
.displayinline { display: inline !important; } .display_inline { display: inline; }
.displaynone { display: none !important; } .display_none { display: none !important; }
.pointereventsnone { pointer-events: none !important; } .pointer_events_none { pointer-events: none; }
.pointereventsauto { pointer-events: auto !important; } .pointer_events_auto { pointer-events: auto; }
.opacity1 { opacity: 1 !important; } .opacity_1 { opacity: 1; }
.opacity0 { opacity: 0 !important; } .opacity_0 { opacity: 0; }

/*▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁*/
/* 🎢                                                                                                                     */
/*▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔*/

:root{
   --cw: rgb(255,255,255);
   --cb: rgb(0,0,0);

   --cg1: rgb(51,51,51);
   --cg2: rgb(102,102,102);
   --cg3: rgb(153,153,153);
   --cg4: rgb(204,204,204);

   --cy1: rgb(255,255,0);
   --cy2: rgb(255,255,204);
   --cy3: rgb(255,204,0);

   --cr1: rgb(204,51,51);
   --cr2: rgb(255,204,204);

   /* aciertos */
   --cn1: rgb(31,122,71);
   --cn2: rgb(214,240,224);

   /* papel del manual */
   --cp1: rgb(250,247,238);
   --cp2: rgb(232,226,208);

   --serif: 'Lora', Georgia, 'Times New Roman', serif;
}

.midX{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.display_on{
   transform: scaleX(1);
   transform-origin: left;
   left: 0;
}
.display_off{
   pointer-events: none;
   transform: scaleX(0);
   transform-origin: right;
   right: 0;
}

.answer_pick{
   border-color: var(--cg1) !important;
   border-width: 6px !important;
}

.answer_hit{
   border-color: var(--cn1) !important;
   background: var(--cn2) !important;
}
.answer_miss{
   border-color: var(--cr1) !important;
   background: var(--cr2) !important;
}
.answer_mute{ opacity: 0.55; }
.answer_lock{ pointer-events: none; }

.exam_flow_ready{
   box-shadow: 0 0 60px var(--cy1) !important;
   border-width: 6px !important;
}

.exam_score_grade_pass{ color: var(--cy3); }
.exam_score_grade_fail{ color: var(--cr1); }

.exam_flow_miss_1{ animation: exam_flow_miss_1 ease-in-out 0.5s; }
@keyframes exam_flow_miss_1{
   0%{ background: var(--cy2); }
   50%{ background: var(--cy1); }
   100%{ background: var(--cy2); }
}
.exam_flow_miss_2{ animation: exam_flow_miss_2 ease-in-out 0.5s; }
@keyframes exam_flow_miss_2{
   0%{ filter: blur(0); }
   50%{ filter: blur(1px); }
   100%{ filter: blur(0); }
}

.exam_flow_next{ animation: exam_flow_next cubic-bezier(0,1,1,1) 0.3s; }
@keyframes exam_flow_next{
   0%{ filter: sepia(0); }
   50%{ filter: sepia(1); }
   100%{ filter: sepia(0); }
}

.source_open{ animation: source_open cubic-bezier(0.25,1,0.5,1) 0.45s; }
@keyframes source_open{
   0%{ opacity: 0; transform: translateY(-10px); }
   100%{ opacity: 1; transform: translateY(0); }
}

/*▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁*/
/* 🎡                                                                                                                    */
/*▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔*/


body,.action
{ font-size: 16px; }


html,body
{ overflow: hidden; }


html,body,#app,section
{ width: 100%; height: 100%; }


h1,#home_menu,#home_menu li,
h2
{ width: 100%; }
nav
{ width: 90%; }


.action,h2,#exam_doc,#train_doc,#doc_doc,
#exam_score,#train_score
{ text-align: center; }


section
{
   position: absolute;
   transition: transform ease-in-out 0.7s;
   padding: 5%;
}
section.section_sub
{
   display: flex;
   flex-direction: column;
   padding: 0;
   background: linear-gradient(
      180deg,
      var(--cy2) 0%,
      var(--cw) 18%,
      var(--cw) 82%,
      var(--cy2) 100%
   );
}


#home_menu li
{
   margin-bottom: 30px;
   &:last-child{ margin-bottom: 0; }
}
h1
{ margin-bottom: 60px; }


.action
{ margin: 0 auto; }

.action_a
{
   padding: 16px;
   border-radius: 30% 0 50% 0;
   border-width: 1px;
   border-style: solid;
   border-color: var(--cy1);
   background: var(--cw);
   transition: border-width 0.16s ease-in-out;
   box-shadow: 6px 6px 1px black;
   filter: drop-shadow(0 0 30px white);
}
.action_b
{
   background: var(--cy2);
   padding: 16px;
   border-radius: 16px 0;
   border-width: 6px;
   border-style: solid;
   border-color: var(--cw);
   transition: border-color 0.16s ease-in-out, background 0.16s ease-in-out;
   width: 100%;
   text-align: left;
}
.action_c
{
   padding: 12px 20px;
   border-radius: 16px 0;
   border: 1px solid var(--cg4);
   background: var(--cw);
   color: var(--cg1);
   font-size: 14px;
}
.action_d
{
   padding: 12px 20px;
   border: none;
   background: none;
   color: var(--cg2);
   font-size: 13px;
   text-decoration: underline;
   text-underline-offset: 4px;
}

.back
{
   position: absolute;
   top: 14px;
   left: 14px;
   padding: 8px 12px;
   background: none;
   color: var(--cg3);
   font-size: 13px;
}


h2
{ color: var(--cg3); text-transform: uppercase; font-weight: bold; }

#exam_doc,#train_doc,#doc_doc
{ color: var(--cg4); }

#exam_question_n,#train_question_n,.exam_answer_flag
{ color: var(--cg2); }

.exam_answer_flag
{ display: inline; }


/*▁▁ estructura de las tres secciones ▁▁*/

.sub_head
{
   position: relative;
   flex: 0 0 auto;
   padding: 40px 5% 0 5%;
   .exam_doc{ display: block; }
   p{ font-size: 9px; padding: 10px 0; line-height: 1.5; }
}

.sub_body
{
   flex: 1 1 auto;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   padding: 20px 5% 30px 5%;
}

.sub_foot
{
   flex: 0 0 auto;
   padding: 14px 5% calc(14px + env(safe-area-inset-bottom, 0px)) 5%;
   border-top: 1px solid var(--cy2);
   background: var(--cw);
}


.gauge
{
   height: 3px;
   background: var(--cy2);
   overflow: hidden;
   span{
      display: block;
      height: 100%;
      width: 0;
      background: var(--cy3);
      transition: width 0.4s ease-in-out;
   }
}


/*▁▁ preguntas y respuestas ▁▁*/

#exam_question,#train_question
{
   width: 100%;
   margin-bottom: 30px;
   text-align: center;
   line-height: 1.4;
   strong{ font-weight: bold; }
}

#exam_answer,#train_answer
{
   width: 100%;
   li{
      margin-bottom: 18px;
      &:last-child{ margin-bottom: 0; }
   }
}


/*▁▁ la fuente del manual ▁▁*/

.source
{
   margin-top: 34px;
   scroll-margin-top: 110px;
   padding: 18px 18px 18px 20px;
   background: var(--cp1);
   border-left: 4px solid var(--cy3);
   border-radius: 0 16px 16px 0;
}
.source_head
{
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   margin-bottom: 10px;
   gap: 10px;
}
.source_tag
{
   font-size: 9px;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--cg2);
}
.source_page
{
   font-size: 9px;
   letter-spacing: 1px;
   color: var(--cg3);
   text-align: right;
}
.source_text
{
   font-family: var(--serif);
   font-size: 15px;
   line-height: 1.55;
   color: var(--cg1);
}


/*▁▁ marcadores ▁▁*/

#exam_score,#train_score
{
   width: 100%;
   padding: 20px 0;
   #exam_score_point,#train_score_point{ font-weight: bold; }
}
#exam_score_text,#train_score_text
{ font-size: 26px; line-height: 2.2; color: var(--cg1); }

#exam_score_grade,#train_score_grade
{ font-size: 26px; line-height: 1.8; text-transform: uppercase; font-weight: bold; }

#exam_score_note,#train_score_mode
{ font-size: 12px; color: var(--cg3); line-height: 2; }

#train_score_pct
{ font-size: 64px; font-weight: bold; color: var(--cy3); line-height: 1.4; }

.score_actions
{
   margin-top: 24px;
   display: flex;
   flex-direction: column;
   gap: 12px;
   align-items: center;
}

#exam_-review{ margin-top: 20px; }


/*▁▁ revisión del examen ▁▁*/

#exam_review
{
   margin-top: 26px;
   text-align: left;
   li{
      padding: 16px 0;
      border-top: 1px solid var(--cy2);
   }
   .review_q{ font-weight: bold; line-height: 1.4; margin-bottom: 8px; }
   .review_a{ font-size: 14px; line-height: 1.8; color: var(--cg2); }
   .review_hit{ color: var(--cn1); }
   .review_miss{ color: var(--cr1); }
   .source{ margin-top: 12px; }
}


/*▁▁ panel de bloques del entrenamiento ▁▁*/

.panel_key
{
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   width: 100%;
   margin-top: 10px;
   padding: 9px 14px;
   background: var(--cw);
   border: 1px solid var(--cy1);
   border-radius: 16px 0;
   text-align: left;
}
.panel_key_label
{
   font-size: 9px;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--cg3);
}
.panel_key_value
{
   font-size: 13px;
   flex: 1 1 auto;
   color: var(--cg1);
   font-weight: bold;
}

#train_panel
{
   position: absolute;
   top: 0; left: 0;
   width: 100%; height: 100%;
   z-index: 20;
   background: rgba(0,0,0,0.55);
   display: flex;
   align-items: flex-end;
   justify-content: center;
}
.panel_sheet
{
   width: 100%;
   max-height: 92%;
   overflow-y: auto;
   padding: 26px 22px calc(26px + env(safe-area-inset-bottom, 0px)) 22px;
   background: var(--cw);
   border-top: 6px solid var(--cy1);
   border-radius: 24px 24px 0 0;
   animation: panel_rise cubic-bezier(0.25,1,0.5,1) 0.35s;
}
@keyframes panel_rise{
   0%{ transform: translateY(40px); opacity: 0; }
   100%{ transform: translateY(0); opacity: 1; }
}
.panel_title
{ font-size: 18px; font-weight: bold; color: var(--cg1); margin-bottom: 8px; }
.panel_note
{ font-size: 12px; line-height: 1.5; color: var(--cg3); margin-bottom: 20px; }

#train_panel_menu
{
   margin-bottom: 18px;
   li{ margin-bottom: 10px; }
   .panel_pick{
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 14px;
      width: 100%;
      padding: 14px 16px;
      background: var(--cw);
      border: 1px solid var(--cg4);
      border-radius: 16px 0;
      text-align: left;
   }
   .panel_pick_on{
      border-color: var(--cy3);
      border-width: 2px;
      background: var(--cy2);
   }
   .panel_pick_name{ font-size: 15px; color: var(--cg1); }
   .panel_pick_n{ font-size: 12px; color: var(--cg2); white-space: nowrap; }
}


/*▁▁ documentación ▁▁*/

#doc_frame
{
   width: 100%;
   height: 100%;
   min-height: 320px;
   border: 1px solid var(--cy2);
   background: var(--cp2);
   overflow: hidden;
   iframe{ width: 100%; height: 100%; border: 0; }
}
#doc .sub_body{ display: flex; flex-direction: column; gap: 12px; }
#doc_fallback{ font-size: 12px; color: var(--cg3); text-align: center; }
#doc .sub_foot{ display: flex; flex-direction: column; align-items: center; gap: 6px; }
#doc_-open{ text-align: center; }


#app{
   position: fixed;
   top: 0;

   #home{
      background: url(./art/bg_home_1.png);
      background-size: cover;
      nav{
         top: 60%;
         h1{
            display: none;
            text-indent: -119px;
            overflow: hidden;
            width: 300px;
            height: 160px;
            margin-left: auto;
            margin-right: auto;
            background: url(./art/logo.png);

                background-size: 100% !important;
                background-repeat: no-repeat;
                height: 130px;
         }
      }
   }

   #exam{
      #exam_-flow{
         box-shadow: 0 0 0 var(--cy1);
         transition: box-shadow 0.16s ease-in-out;
      }
   }

   #train{
      #train_-flow{
         box-shadow: 0 0 0 var(--cy1);
         transition: box-shadow 0.16s ease-in-out;
      }
      #train_-end{ margin-top: 6px; }
   }

}


@media (min-width: 720px){
   .sub_head,.sub_body,.sub_foot{ padding-left: 0; padding-right: 0; }
   .sub_head > *,.sub_body > *,.sub_foot > *,.gauge{
      max-width: 640px;
      margin-left: auto;
      margin-right: auto;
   }
   .panel_sheet{ max-width: 560px; border-radius: 24px; margin-bottom: 5%; }
   #train_panel{ align-items: center; }
   #exam_question,#train_question{ font-size: 20px; }
}

@media (prefers-reduced-motion: reduce){
   *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

button:focus-visible,a:focus-visible{
   outline: 3px solid var(--cy3);
   outline-offset: 3px;
}


/*▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁*/
/* 🪁                                                                                                                    */
/*▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔*/



/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
#españatlas_cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Premium Leather / Deep Atlas Vibe */
    background: linear-gradient(135deg, rgb(153, 20, 20), rgb(51, 0, 0));
    border-left: 16px solid rgb(25, 0, 0); /* The dark spine of the book */

    z-index: 100; /* Stays on top of EVERYTHING */

    /* 3D Hinge Setup */
    transform-origin: left center;
    transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.2s ease-in-out 0.3s;

    /* Heavy shadow to give it weight */
    box-shadow: 20px 0 50px rgba(0,0,0,0.8);

    /* Centering the text */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.cover_content {
    text-align: center;
    color: var(--cw);
}

.cover_title {
    font-size: 40px;
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 10px;
    color: var(--cy3); /* Gold text */
}

.cover_subtitle {
    font-size: 14px;
    letter-spacing: 4px;
    color: var(--cw);
    opacity: 0.8;
}

/* THE OPENING ANIMATION CLASS */
.book_is_open {
    /* Swings open towards the user with 3D perspective */
    transform: perspective(1500px) rotateY(-110deg);

    /* Fades out as it opens so it doesn't block the screen */
    opacity: 0;

    /* Prevents the invisible cover from blocking your button clicks! */
    pointer-events: none;
}
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/