/* Estilos del cuerpo */
body {
  font-family: 'Roboto', sans-serif;
  line-height: 1.6;
  background-color: #f4f4f4;
  color: #e21111;
  padding: 0;
  font-size: 20px;
  transition: background 0.5s, color 0.5s;
}



.dark-mode .mode-btn {
  background: #333;
  color: white;
}

.dark-mode,
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6,
.dark-mode p,
.dark-mode label,
.dark-mode form,
.dark-mode section,
.dark-mode main,
.dark-mode div,
.dark-mode article,
.dark-mode table,
.dark-mode th,
.dark-mode td,
.dark-mode .notas ul,
.dark-mode input,
.dark-mode select,
.dark-mode .sidebar,
.dark-mode .sidebar ul,
.dark-mode .sidebar h3,
.dark-mode .video-section h2 {
  background-color: #121212;
  color: white;
}

.dark-mode textarea {
  background-color: #333;
  color: white;
}

dark-mode table {
  background-color: #333;
  color: white;
  border-collapse: collapse;
}

.dark-mode th,
.dark-mode td {
  border: 1px solid #555;
  padding: 10px;
  background-color: #333;
}





.p-reader,
.p_reader {
  line-height: 1.9;
  padding: 0 10px;
}

html {
  scroll-behavior: smooth;

}

h6 {
  font-size: 1.5rem;
  font-weight: 20;
  margin-bottom: 1.3rem;
}

/* Encabezado */
.layout__header {
  position: fixed;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 4rem;
  text-align: center;
  background-color: black;
  color: #fff;
  padding: 0.12rem;
  align-items: center;
  z-index: 2;
  box-shadow: 4px 0px 5px rgba(0, 0, 0, 0.5);
}


#user-name-img {
  width: 2.5rem;
  height: 2.5rem;
}

.size_title {
  font-size: .8rem;
}

.size-font {
  position: fixed;
  display: flex;
  left: 35%;
  top: 0.2em;
  line-height: 2;
  border-radius: 10px;
}

.header-left {
  position: fixed;
  display: flex;
  font-weight: 20;
  gap: 1rem;
  left: 26%;
  line-height: 4
}

.title-header {
  position: fixed;
  display: flex;
  font-size: .9rem;
  line-height: 1.7;
  left: 44%;
}

.size_title {
  font-size: 2rem;
  margin-right: 0.5rem;
}

.no-style {
  all: unset;
  display: inline-block;
  padding: 0.3rem;
  cursor: pointer;
  font-size: 2rem;

  height: 4rem;
  width: 4rem;
  border-radius: 50px;
  margin-right: 0.5rem;
  background-color: #9c0f26;
  text-align: center;
  top: 4rem
}


.controller {
  font-size: 1.5rem;
  cursor: pointer;
  margin-top: 0.25rem;
  transition: 0.2s ease;
}



/* Contenedor principal */
.container {
  display: flex;
  margin: 0px;
}

/* Barra lateral */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 25%;
  height: 100vh;
  background: #fff;


  border-right: 2px solid #ddd;
  overflow-y: auto;
  z-index: 1;
}

.sidebar h2 {
  margin-bottom: 0.625rem;
}

.sidebar ul {
  list-style: none;
}

.sidebar ul li {
  margin-bottom: 0.625rem;

}

.sidebar ul li ul {
  margin-top: 0.31rem;
  margin-left: 0.937rem;

}

.sidebar ul li ul li {
  width: 100%;
  padding: 0.65rem;
}

.what-study:hover,
.sidebar ul li ul li:hover {
  box-shadow: 0px 2px 0.625rem rgba(12, 12, 12, 0.2);
  background-color: rgba(255, 0, 0, 0.5);
  border-radius: 8px;
}

hr {
  border: 1;
  /* Elimina el borde por defecto */
  height: 0.125rem;
  /* Define la altura de la línea */
  border-style: groove;
}

.estudio-libro {
  max-width: 56.25rem;
  /* Se mantiene igual */
  margin: 6.25rem auto;
  /* Se mantiene igual */
  padding: 1.25rem;
  /* 20px -> 1.25rem */
  background: white;
  border-radius: 0.625rem;
  /* 0.625rem -> 0.625rem */
  box-shadow: 0px 0.25rem 0.625rem rgba(0, 0, 0, 0.1);
  text-align: center;
}


/* Texto */
.contenido h1 {
  font-size: 1.625rem;
  margin-bottom: 0.625rem;

}


.contenido h1 span {
  color: #2c3e50;
  font-weight: bold;
}




/* Video */
.video-container {
  margin-top: 1.25rem;
  max-width: 50rem;
}

.video-container iframe {
  width: 100%;
  max-width: 35rem;
  height: 19.6875rem;
  border-radius: 0.625rem;
}





.video-section {
  max-width: 50rem;
  margin: 1.875rem auto;
  background: white;
  padding: 1.25rem;
  border-radius: 0.625rem;
  box-shadow: 0px 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  margin-top: 7.5rem;
}


/* Encabezado */
.video-section h2 {
  color: #333;
  margin-bottom: 0.9375rem;
}


/* Contenedor del video */
.video-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  /* Relación de aspecto 16:9 */
  overflow: hidden;
  border-radius: 0.5rem;
  background: black;

}

/* Video responsive */
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Notas debajo del video */
.notas {
  text-align: left;
  margin-top: 1.25rem;
}


.notas h3 {
  color: #bd192f;
}

.notas ul {
  list-style: disc;
  padding-left: 1.25rem;
  color: #333;
}


/* Área de contenido */
.content {
  width: 75%;
  padding: 1.25rem;
  background: #fff;
  margin-left: 25%;
  margin-right: 0;
  min-height: 100vh;
}

.size-font {
  display: none;
  position: fixed;
  background-color: #bd192f;
  top: 50%;
  color: white;
  width: 20rem;
  z-index: 1000;
  padding: 10px;
  transition: transform 0.5s ease-in-out;
  transform: translateX(-318%);
  /* Mueve el div hacia la derecha */
}

/* Cuando pasas el mouse sobre el div, se desplaza hacia la izquierda */
.size-font:hover {
  transform: translateX(0);
}

/* Flecha al lado derecho */
.size-font::before {
  content: "⚙️";
  position: absolute;
  font-size: 3rem;
  top: 25%;
  right: -30px;
  width: 0;
  height: 0;
  opacity: 0.8;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 30px solid #bd192f;
  transform: translateY(-1%);
}


.content section {
  margin-bottom: 1.875rem;
}


.content h2 {
  margin: 1.125rem 0;
  border-bottom: 0.125rem solid #bd192f;
  padding-bottom: 0.3125rem;
}


.content article {
  margin-bottom: 1.25rem;
  padding-bottom: 0.9375rem;
  border-bottom: 1px dashed #ccc;
}

#tema1 {
  margin-top: 3.125rem;
}


/* Sección de preguntas */
.question {
  margin: 2.5rem 0;
  margin-left: .2rem;
  padding: 0.625rem;
  padding-left: .6rem;
  background-color: #ecf0f1;
  border-left: 3px solid #bd192f;
}


.question h4 {
  margin-bottom: 0.3125rem;
}


/* Formularios */
form {
  margin-top: 0.625rem;
}


input[type="text"],
textarea {
  width: 100%;
  padding: 0.625rem;
  margin-bottom: 0.625rem;
}

/*Estilos preguntas emparejadas*/
table {
  width: 100%;
  border-collapse: collapse;
  max-width: 100%;
  margin-bottom: 1.6rem;
}

th,
td {
  border: 1px solid #ddd;
  padding: 0.625rem;
  text-align: left;
  word-wrap: break-word;
  /* Permite que el texto largo se divida en varias líneas */
  width: 0.3px;
  /* Intenta forzar el ancho */
  overflow: hidden;
  /* Oculta contenido que se pase */

  text-overflow: ellipsis;/
}

th {
  background-color: #272323;
  color: white;
}

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

.encabezados_tablas {
  font-weight: bold;
}

.title_grafica {
  margin-top: 3rem;
}

.resaltar {
  color: #130101;
  background-color: #B0E0E6;
  padding: 1.25rem 1.5625rem;
  z-index: 1;
  border-radius: 0.625rem;
  border-style: ridge;
}


.mensaje_final {
  background-color: var(--color-principal);
  box-shadow: 0.125rem 0rem 0.3125rem rgba(0, 0, 0, 0.1);
  padding: 1.25rem;
  height: auto;
  margin-top: 3.125rem;
}


.separacion {
  height: 1rem;
  border-top: 1px dashed #ccc;
  border-bottom: 1px dashed #ccc
}





button {
  background-color: #10913b;
  color: #ffffff !important;
  padding: 0.75rem 1.25rem;
  margin: 0.9375rem 0;
  border: none;
  border-radius: 0.75rem;
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  box-shadow: 0rem 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
}


/* Efecto hover más llamativo */
button:hover {
  background-color: #9c0f26;
  /* Un tono más oscuro al pasar el mouse */
  transform: scale(1.05);
  /* Efecto de agrandamiento */
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3);
  /* Sombra más fuerte */
}


/* Pie de página */
footer {
  margin-left: 25%;
  text-align: center;
  padding: 0.9375rem;
  background: #333;
  color: #fff;
  margin-top: 1.25rem;
}


body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  color: #333;
}



/* Ícono de hamburguesa (inicialmente oculto en pantallas grandes) */
.hamburger-icon {
  font-size: 1.5rem;
  cursor: pointer;
  display: none;
  position: absolute;
  left: 1.25rem;
  top: 1.25rem;
}


.fa-bars,
.fa-xmark {
  user-select: none;
}


/* Barra lateral (sidebar) - diseño para pantallas grandes */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 25%;
  height: 100vh;
  background: #fff;
  border-right: 0.125rem solid #ddd;
  padding: 1.25rem;
  overflow-y: auto;
  margin-top: 4rem;
}


.sidebar a {
  width: 100%;
  text-decoration: none;
  color: var(--color-title);
  font-size: 1.0625rem;
  display: flex;
  align-items: center;
  padding: 0.625rem 3.125rem;
}

.sidebar h3 {
  font-size: 1.3rem;
  color: #bd192f;
}

.sidebar-usuario {
  display: flex;
  gap: 1.5rem;
  position: absolute;
  height: 4.9rem;
  line-height: 3.1;
  font-size: 1.5rem;
  color: white;
  align-items: center;


}




.layout__menu-toggle {
  display: none;

}

.layout__menu-toggle i {
  font-size: 1.5rem;
  color: #bd192f;
}

.title_leccio {
  display: flex;
  flex-direction: row;
  gap: 10;
}

.number_leccion {
  text-align: center;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 1.5rem !important;
}

.leccion_num {
  font-size: 10rem !important
  
}

.title_lecciones {
  display: inline-block;
  font-size: 3rem !important;
  line-height: 1;
  padding-top: 5.43rem;
}

.mapa {
  margin: 1rem auto;
  
}

.container {
  display: flex;
  justify-content: space-between;
}
.autoexamen,
.compruebe_respuestas{
  margin: 1 rem 0;
  padding: 1rem 0.5rem;   
  box-shadow: 0rem 0.25rem 0.5rem rgba(0, 0, 0, 0.2);

}
.enviar_respuestas{
  margin: 0 auto"
}
.container_question {
  display: flex;
  justify-content: space-between;
}

.superTitulo {
  font-size: 1.8rem;
  font-weight: 600;
}

.titulo-unidad {
  text-align: center;
  margin-top: 3.125rem;
  font-size: 3rem;
}


/* Estilos responsive para dispositivos móviles */
@media (max-width: 1248px) {

  html {
    font-size: 14px;
    /* Valor por defecto */

  }

  .sidebar a {
    padding: 0;
  }

  .header-left {
    line-height: 3;
  }

}

@media (max-width: 830px) {
  html {
    font-size: 13px;
    /* Valor por defecto */
  }

  .sidebar-usuario {
    display: none;
  }

  #list_one {
    box-shadow: 0px 2px 0.625rem rgba(12, 12, 12, 0.2);
    background-color: rgba(255, 0, 0, 0.5);
    border-radius: 8px;
  }


  /* Mostrar el ícono de hamburguesa */
  .layout__menu-toggle {
    display: block;
    position: fixed;
    width: 2.8rem;
    height: 2.8rem;
    line-height: 3.2rem;
    text-align: center;
    background-color: white;
    right: 1rem;
    top: 0.7rem;
    border-radius: 3rem;
    cursor: pointer;
    transition: all 500ms ease-in-out;
    z-index: 9999;

  }

  .layout__menu-toggle .fa-xmark {
    display: none;
  }

  /* La barra lateral se oculta fuera de la pantalla por defecto */
  .sidebar {
    left: 300%;
    transition: right 0.5s;
    padding: 1rem 0 1rem 0.2rem;

  }

  /* Cuando el checkbox está marcado, la sidebar se desliza a la vista */

  /* El contenido principal ocupa el ancho completo en móviles */
  .content {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 0.312rem 0px;
    padding-left: 0.5rem;
  }

  .container {
    margin: 0;
  }

  .layout__sidebar--visible {

    display: block;
    position: fixed;
    width: 100%;
    left: 0%;
    color: white;
    z-index: 500;
    transition: right 0.5s;
  }

  /* Cuando el botón tenga la clase active, se oculta el ícono de las tres barras */
  .layout__menu-toggle.active .fa-bars {
    display: none;
  }

  /* Y se muestra el ícono de la X */
  .layout__menu-toggle.active .fa-xmark {
    display: block;
  }


  .sidebar .sidebar__list {
    color: rgb(22, 22, 21);
  }

  .layout__header {
    position: fixed;
    width: 100%;
    margin-top: 0;
  }

  footer {
    margin-left: 0;
  }

  .header-left {

    gap: 15px;
    left: 1%;

  }

  .size-font {
    left: 16%;
  }

  .title-header {
    left: 26%;
  }

}

@media (max-width: 600px) {


  html {
    font-size: 12px;
    /* Valor por defecto */
  }




  .controller {
    cursor: pointer;
    transition: transform 0.2s ease;
  }

  .layout__menu-toggle {
    background-color: transparent;
  }

  .layout__menu-toggle .fa-bars {
    font-size: 1.5rem;
    color: white;
  }

  .layout__menu-toggle .fa-xmark {
    font-size: 1.5rem;

  }

  #list_one {
    box-shadow: 0px 2px 0.625rem rgba(12, 12, 12, 0.2);
    background-color: rgba(255, 0, 0, 0.5);
    border-radius: 8px;
  }


}

@media (max-width: 500px) {

  html {
    font-size: 10px;
    /* Valor por defecto */
  }

  .sidebar {
    padding: 0 1.5rem;
  }

  .sidebar a {
    font-size: 1.7rem;
  }

  .sidebar .what-study {
    font-size: 2rem;
    margin: 2rem 0.5rem;
    color: #444242
  }

  .header-left {

    gap: 10px;
    left: 1%;
    line-height: 2.2
  }

  .size-font {
    left: 16%;
  }

  .title-header {
    left: 15%;
    font-size: 1rem;
  }

  .layout__header {
    height: 8rem;
  }

  .layout__menu-toggle .fa-xmark,
  .layout__menu-toggle .fa-bars {
    font-size: 3rem;
    color: #e21111;
  }

  .layout__menu-toggle {
    display: block;
    top: 2.5rem;
  }

  .header-left {
    display: none;
  }

  .size-font {
    display: block;
    top: 50%;
    transition: transform 0.5s ease-in-out;
    transform: translateX(-135%);

  }

  /* Cuando pasas el mouse sobre el div, se desplaza hacia la izquierda */

  /* Flecha al lado derecho */
  .size-font::before {

    top: 25%;
    right: -30px;

    transform: translateY(-1%);
  }
}