.question {
  display: flex;
  flex-direction: column;
  padding: .5rem .5rem .5rem 1rem;
  border-bottom: 1px solid #ccc;  
  border: 1px solid transparent;
  border-radius: .5rem;
  background-color: #f6f4f4;
  margin-bottom: 1rem;
  
  &.hidden {display: none;}

  &.selected {
    background-color: #f5f5f5;
    border: 1px solid #a8a8a8;
    box-shadow: #9ca4b3 0 2px 4px;
  }

  .question-introduction {
    font-style: italic;
    color: #4a5568; 
    margin-bottom: 0.6em;
    border-radius: 4px;
    white-space: pre-wrap; 
    font-size: 0.95em;
  }
  .question-container {
    display: flex;
    flex-direction: row;

    .question-number {
      width: 2.2rem;
      font-weight: bold;
    }

    .question-content { 
      display: flex;
      flex-direction: column;
      margin-left: 0rem;
      width: auto;
      flex: 1 1 0;

      .question-text {
        font-weight: bold;
        line-height: 1.4rem;
        margin-bottom: .5rem;
      }

      .question-options {
        display: flex;
        flex-direction: column;
        list-style-type: none;
        margin: 0;
        padding: 0;
        cursor: pointer;

        .question-option {
          border: 2px solid transparent;
          padding: .2rem .5rem;
          border-radius: .2rem;
          line-height: 1.3rem;

          &.correct, &.correct:hover {
            background-color: rgb(229, 255, 229);
            border-color: darkgreen;
          }

          &.incorrect, &.incorrect:hover {
            background-color: rgb(255, 234, 234);
            border-color: red;
          }
        }

        .question-option:hover {
          background-color: #e5e4e4;
        }
        
      }
    }
  }
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: .5rem;
  /* margin-bottom: 1rem; */
}

.column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
}




@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ 
  article.tests { padding: 1rem !important; }

  .tests-list-section {
    display: flex;
    flex-direction: column;
    padding: 1rem .5rem;
    margin-bottom: 2rem;

    .tests-list-title {
      font-size: 1.2rem;
      font-weight: 600;  
      display: none;
    }

    .tests-list-subtitle {  
      display: none;
      font-size: 1rem;
      color:#333;
      margin-bottom: 2rem;
    }
  
    ul.tests-list {
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      list-style: none;
      margin: 0;
      padding: 0;
      width: 100%;

      .test-item {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: .5rem 1rem;
        text-align: left;
        background-color: #f9f9f9; 
        width: 100%;
        border-bottom: 1px solid #aaa;

        &:last-child {
          border-bottom: none;
        }

        &:hover { 
          background-color: rgb(235, 235, 235);
        }

        .campos {
          flex: 1 1 0;
          display: flex;
          flex-direction: column;

          h3 {
            font-size: 1rem;
            font-weight: bold;
            flex-wrap: wrap;
          }

          span.numero_preguntas {
            font-size: .7rem;
            padding: 0;
          }
        }


      }

      .button {
        background-color: transparent;
        border: 2px solid black;
        border-radius: 3px;
        color: black;
        min-width: 40px; /* Asegura un área de clic mínima */
        min-height: 40px;

        .button-text { display: none; }

        &:hover {
          background-color: black;
          color: white;
          cursor: pointer;
        }

        &.disabled, &.disabled:hover {
          opacity: 0.5;
          cursor: not-allowed;
          background-color: white;
          color: black;
        }

      }
    }



  }

  header.entry-header {
    display: none;
  }

  .alerta-gratuito {
    width: 100%;
    height: auto;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    margin-bottom: .5rem;

    background-color: rgb(211, 255, 231);
    /* border: 2px solid rgb(4, 102, 39); */
    border-radius: .5rem;
    color: rgb(4, 102, 39);
    font-weight: 600;
    line-height: 1.2rem;

    svg { 
      margin-right: 1rem; 
      width: 60px;
      height: 60px;

      path {
        fill: red;
      }
    }

    .button {
      background-color: rgb(227, 255, 239);
      border: 2px solid rgb(4, 102, 39);
      color: rgb(4, 102, 39);
      text-decoration: none !important;
      font-weight: 600;
    }

    .button:hover { background-color: rgb(4, 102, 39); color: white; }
    
  }

  .percentage {
    &:after { content: "%"; }
  }
  
  .progressbar {
    display: block;
    width: 80px;
    height: 7px;
    overflow: hidden;
    background-color: #cdcdcd;
    /* border: 1px solid #555; */
    border-radius: 3px;

    margin-top: 5px;

    .value {
      height: 7px;
      width: 20%;
      background-color: #2cb345;
    }
  }      

  .tests-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Evita que la cabecera se estire con el contenido */

    width: 100%;

    padding: 0;
    margin: 0 0 1rem 0;

    border: 1px solid black;
    border-radius: .5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);

    .toggle-button {
      position: absolute;
      top: .5rem;
      right: 1rem;
      padding: 1rem;
      z-index: 100;

      .inner {
        width: 10px;
        height: 10px;
        border: solid #333;
        border-width: 0 2px 2px 0;
        transform: translateY(-0%) rotate(45deg); /* Flecha hacia abajo */
        transition: transform 0.3s ease-in-out;
      }

      &:hover {
        cursor: pointer;
        background-color: rgb(231, 231, 231);
        border-radius: 3px;
      }
    }

    &.is-open .toggle-button {
      transform: translateY(-0%) rotate(-180deg); /* Flecha hacia arriba */
    }

    &.single {
      border: 1px solid transparent;
      box-shadow: none;  
    }
    
    .tests-header {
      width: 100%;

      display: flex;
      align-items: start;
      /* Se ajusta para dejar espacio a la barra de admin de WP y/o cabecera del tema */
      transition: all 0.4s ease-in-out;

      h2 {
        font-size: 1.2rem;
        flex-grow: 1;
        margin: 0;
        text-wrap: balance;
      }

      .titulo-detalle { 
        font-size: .8rem;
        color: rgb(183 147 12);
        font-weight: 600;
      }

      p { 
        font-size: .9rem;
        line-height: 1.2rem;
        
      }

      .section-percentage { display: none; }
    }

    .tests-body {
      display: none;
      transition: all 0.4s ease-in-out;
      padding-top: 3rem;
    }

    &.is-open .tests-header, &.single .tests-header {
      transition: all 0.4s ease-in-out;
    }

    &.is-open .tests-body, &.single .tests-body {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 1rem;

      transition: all 0.4s ease-in-out;
    }

    &.single .tests-body {
      padding-top: 0px;
    }
    
    .tests-title0 {
      font-size: .7rem;
      font-weight: 600;
      margin-right: 1rem;
    }

    .tests-wrapper {
      width: 100%;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      scroll-behavior: smooth;
    }

    .tests-pagination {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      width: 100%;
      margin: 1rem 0;
      padding: 1rem .5rem;  
      
      background-color: #f2f2f2;
      border-radius: 5px;

      .section-percentage {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        padding: 0 .5rem;
        font-size: .9rem;;

        h3 { 
          margin: 0;
          padding: 0;
          font-size: .9rem;
          font-weight: 600;

          &:before { content: "Compl."; }
        }

        .progressbar { width: 80px; }
      }

      #pagination-status {
        font-size: 1.2rem;
        font-weight: 500;
      }

      .block-buttons {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: .8rem;

        button {
          background-color: white;
          border: 2px solid black;
          border-radius: 3px;
          color: black;

          padding: .8rem .8rem;

          &:hover {
            background-color: black;
            color: white;
            cursor: pointer;
          }

          &.disabled, &.disabled:hover {
            opacity: 0.5;
            cursor: not-allowed;
            background-color: white;
            color: black;
            border: 2px solid white;
          }

        }
      }
    }

    &.is-open .tests-statistics,
    &.single .tests-statistics {
      display: flex;

      &.hidden {display: none;}
    }

    .tests-statistics { 
      display: none;  
      flex: 1 1 0;
      flex-direction: column;
      justify-content: space-between;

      margin: 0;
      padding: 1rem;
      gap: 1rem;
      
      border: 2px solid grey;
      border-radius: 5px;
      background-color: rgb(238, 238, 238);

      &.hidden {display: none;}

      h2 {
        margin:0;
        font-size: 1.2rem;
        font-weight: 600;
        color: black;
      }

      .stat-card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;

        width: 100%;
        padding: 1rem;

        background-color: #f9f9f9;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        border-radius: 5px;

        ul.items {
          margin: 0;
          padding-left: 0;
          list-style: none;
          width: 100%;

          .item {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;

            width: 100%;
            height: auto;
            margin-bottom:.5rem;

            &:last-child { margin-bottom: 0; }
          }

        }



        .block-percentage {
          background-color: grey;
          color: white;
          border-radius: 3px;

          font-size: .9rem;
          font-weight: 600;

          padding: .2rem .5rem;
          margin-left: 1rem;

          &.black { background-color: rgb(220, 220, 220); color: black; }
          &.green { background-color: rgb(212, 255, 212); color: darkgreen; }
          &.red { background-color: rgb(255, 219, 219); color: darkred; }
          &.yellow { background-color: rgb(255, 237, 186); color: rgb(181, 133, 0); }

          &:after { content: " %"; }
        }

        h3 { font-size: 1rem; font-weight: bold; margin: 0; }
      }
      /*
      .stat-card h4 { margin: 0 0 0.5rem 0; font-size: .7rem; color: #555; font-weight: bold; text-transform: uppercase; }
      .stat-card p { margin: 0; font-size: 1.5rem; font-weight: bold; color: #333; }
      .stats-correct { color: darkgreen; }
      .stats-incorrect { color: red; }
*/
    }
  }

}
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ 
  
  .tests-list-section {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    border: 1px solid #e0e0e0;
    border-radius: .5rem;
    background-color: #f9f9f9;
    margin-top: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 8px 24px rgba(56, 54, 65, .1);

    .tests-list-title {
      display: inline-block;
      font-size: 1.2rem;
      font-weight: 600;  
    }

    .tests-list-subtitle {  
      display: inline-block;
      font-size: 1rem;
      color:#333;
      margin-bottom: 2rem;
    }
  
    ul.tests-list {
      margin: 0;
      padding-left: 1rem;
      width: 100%;
      font-size: 1rem;

      &.cols2 .test-item { width: 49%; }
      &.cols3 .test-item { width: 32%; }
      &.cols4 .test-item { width: 24%; }

      .test-item {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: .5rem 1rem;
        text-align: left;
        background-color: #f9f9f9; 
        width: 100%;
        border-bottom: 1px solid #aaa;
        font-size: .9rem;

        &:last-child {
          border-bottom: none;
        }

        &:hover { 
          background-color: rgb(235, 235, 235);
        }

        .campos {
          flex: 1 1 0;
          display: flex;
          flex-direction: row;

          h3 { 
            flex: 1 1 0; 
            font-weight: 400; 
            font-size: .9rem;
          }

          span.numero_preguntas {
            padding: 0 2rem;
            display:flex;
            align-items: center;
            font-size: .9rem;
          }
        }

      }

      .button {
        background-color: transparent;
        border: 2px solid black;
        border-radius: 3px;
        color: black;
        padding: .5rem 2rem;

        display: inline-flex;
        align-items: center;
        gap: 8px; /* Espacio entre el icono y el texto */
        justify-content: center;

        .button-text { display: inline-block; }

        &:hover {
          background-color: black;
          color: white;
          cursor: pointer;
        }

        &.disabled, &.disabled:hover {
          opacity: 0.5;
          cursor: not-allowed;
          background-color: white;
          color: black;
        }

      }
    }


  }

  .tests-container {
    flex-direction: row;
    align-items: flex-start; /* Evita que la cabecera se estire con el contenido */

    padding: .5rem 1rem;

    .tests-header {
      display: flex;
      flex-direction: column;

      padding-right: 2rem; /* Espacio para el botón */
      position: sticky;
      /* Se ajusta para dejar espacio a la barra de admin de WP y/o cabecera del tema */
      top: 100px; 

      .section-percentage {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;

        background-color: #f2f2f2;
        border-radius: .3rem;

        width: 100%;
        padding: .5rem 1rem;
        margin-top: 1rem;

        h3 { 
          font-size: .9rem;
          line-height: 1.5rem;
          margin: 0;

          &:before { content: "Completado" }
        }

        .progressbar {
          flex: 1 1 0;
        }
      }
    }

    .tests-body {
      display: none;
      transition: all 0.4s ease-in-out;
      padding-top: 3rem;
    }

    &.is-open .tests-header, &.single .tests-header {
      width:35%;
      transition: all 0.4s ease-in-out;
    }

    &.is-open .tests-body, &.single .tests-body {
      width: 65%;
    }

    .tests-wrapper {
      width: 100%;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      scroll-behavior: smooth;
    }


    .tests-pagination {
      padding: 1rem;  

      .section-percentage {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        padding: 0 .5rem;
        font-size: .9rem;;

        h3 { 
          margin: 0;
          padding: 0;
          font-size: 1rem;
          font-weight: 600;

          &:before { content: "Completado"; }
        }

        .progressbar {
          width: 200px;
        }

      }

      #pagination-status {
        font-size: 1.2rem;
        font-weight: 500;
      }

      .block-buttons {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: .8rem;

        button {
          background-color: white;
          border: 2px solid black;
          border-radius: 3px;
          color: black;

          padding: .8rem 1.8rem;

          &:hover {
            background-color: black;
            color: white;
            cursor: pointer;
          }

          &.disabled, &.disabled:hover {
            opacity: 0.5;
            cursor: not-allowed;
            background-color: white;
            color: black;
            border: 2px solid white;
          }

        }
      }
    }

    &.is-open .tests-statistics,
    &.single .tests-statistics {
      display: flex;
      

      &.hidden { display: none; }
    }

    .tests-statistics { 
      display: none;  
      flex: 1 1 0;
      flex-direction: column;
      justify-content: space-between;

      margin: 1rem 0;
      padding: 1rem;
      gap: 1rem;
      
      border: 2px solid grey;
      border-radius: 5px;
      background-color: rgb(238, 238, 238);

      &.hidden {display: none;}

      h2 {
        margin:0;
        font-size: 1.2rem;
        font-weight: 600;
        color: black;
      }

      .stat-card {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        padding: .5rem 1rem;

        background-color: #f9f9f9;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        border-radius: 5px;

        h3 { font-size: 1rem; font-weight: bold; margin: .5rem;}

        ul.items {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;

          .item {
            display: flex;
            flex-direction: column;

            border-right: 1px solid rgb(227, 227, 227);
          }

          .item:last-child {
            border-right: none;
          }
          
        }
      }
      .stat-card h4 { margin: 0 0 0.5rem 0; font-size: .7rem; color: #555; font-weight: bold; text-transform: uppercase; }
      .stat-card p { margin: 0; font-size: 1.5rem; font-weight: bold; color: #333; }
      .stats-correct { color: darkgreen; }
      .stats-incorrect { color: red; }

    }
  }

}
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }



/* Responsive styles for mobile */
@media screen and (max-width: 600px) {
  .tests-container .tests-statistics {
    flex-direction: column;
  }

  .tests-container .stat-card {
    width: 100%;
  }
}