/* ! ESTILOS GENERALES */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  box-shadow: none;
}

.ocultar {
  display: none;
}

body {
  padding: 1px;
  overflow: hidden;
}

/* ! ESTILOS DEL CUERPO PRINCIPAL */
.contenedor-principal {
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    "encabezado"
    "menu"
    "principal"
    "pie";
}

/* ! ESTILOS DEL ENCABEZADO */
header {
  grid-area: encabezado;
  padding: 5px 40px 0 5px;
}

.contenedor-titulo {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}

.logoMini {
  height: 24px;
}

.contenedor-migas-de-pan {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-end;
}

.contenedor-migas-de-pan h1,
.contenedor-migas-de-pan h2,
.contenedor-migas-de-pan h3,
.contenedor-migas-de-pan h4 {
  flex-shrink: 0;
  padding-right: 20px;
  line-height: 2rem;
}

h1 {
  color: var(--color-texto-uno);
  font-size: 1.5rem;
}

h2,
h3,
h4 {
  color: var(--color-texto-dos);
  font-size: 1.2rem;
}

/* ! ESTILOS DE LA NAVEGACIÓN */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0;
  height: 1px;
}

.nav-list {
  display: flex;
  position: relative;
  top: -14px;
  list-style: none;
  gap: 0;
}

.nav-list li {
  position: relative;
  padding: 0 8px;
  overflow: hidden;
  list-style: none;
}

.nav-list li a {
  font-size: 1.2rem;
  text-decoration: none;
}

.nav-btn {
  display: none;
}

.nav-list li::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  transition: width 0.3s ease;
}

.nav-list li:hover::after {
  width: 100%;
}

.nav-list li.visibilidad-item {
  display: none;
}

.superIndice {
  font-size: 0.8em;
  vertical-align: 0.3em;

}

.subIndice {
  font-size: 0.8em;
  vertical-align: -0.3em;
}

/* ! ESTILOS DEL CONTENIDO PRINCIPAL */
main {
  grid-area: principal;
  overflow: hidden;
}

/* .contenedor-ventanas {
  display: grid;
  height: 100%;
  grid-template-columns: calc(50% - 3px) 6px calc(50% - 3px);
  grid-template-rows: 40% 6px 60%;
  grid-template-areas:
    "enunciado  resizer1 vista-previa"
    "resizer2 resizer2 resizer2"
    "tabs tabs tabs";
} */

.area-enunciado {
  position: relative;
  grid-area: enunciado;
  padding: 40px;
  overflow-y: auto;
}

.contenedor-enunciado p {
  margin: 20px 0;
}

.area-vista-previa {
  grid-area: vista-previa;
  position: relative;
  display: flex;
  flex-direction: column;
  right: 1px;
  user-select: none;
}

.contenedor-tabs {
  grid-area: tabs;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  padding-top: 10px;
  overflow: hidden;
}

.tabs {
  display: flex;
  padding-left: 10px;
}

.tab {
  padding: 10px 20px;
  cursor: pointer;
  border: 1px solid var(--color-dos);
  border-radius: 5px 15px 0 0;
}

.tab.active {
  border: none;
}

.content {
  display: none;
}

.content.active {
  display: block;
  min-height: 0;
}

/* ! ************** */

.contenedor-iframe {
  width: 100%;
  height: 100%;
}

iframe {
  position: relative;
  width: 100%;
  height: 100%;
  border: none;
}

.area-codigo-html,
.area-codigo-css,
.area-codigo-js {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.resizer {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.resizer.vertical,
.resizer.horizontal,
.resizer.second-vertical::-webkit-resizer {

  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.resizer.vertical {
  grid-area: resizer1;
  cursor: ew-resize;
  width: 5px;
  border: none;
}

.resizer.horizontal {
  grid-area: resizer2;
  cursor: ns-resize;
  height: 5px;
  border: none;
}

.resizer.second-vertical {
  grid-area: resizer3;
  cursor: ew-resize;
  width: 5px;
  border: none;
}

.logo-code {
  position: absolute;
  left: 5px;
  top: 7px;
  z-index: 1;
}

.logo-vista {
  position: absolute;
  z-index:1;
  top: 0px;
  left: -7px;
  width: 50px;
  height: 50px;
}

.logo-enunciado {
  position: absolute;
  top: 7px;
  left: 5px;
  width: 35px;
  height: 35px;
}

.titulo-vista-previa,
.titulo-enunciado {
  z-index: 1;
  padding: 5px 10px 10px 10px;
  border-radius: 0 0 10px 10px;
  transform: rotate(-90deg);
}

.titulo-vista-previa {
  left: -39px;
  top: 50px;
}

.titulo-enunciado {
  left: -34px;
  top: 50px;
}

.titulo-vista-previa {
  position: absolute;
  width: 110px;
}

.titulo-enunciado {
  position: absolute;
  width: 100px;
}

/* ! ESTILOS GENERALES PARA LISTAS */
ol {
  margin: 10px 0 10px 40px;
}

li {
  margin: 5px 0;
}

footer.pie-app {
  grid-area: pie;
  padding: 10px;
  text-align: center;
}


@media (width < 900px) {
  body {
    overflow: auto;
  }

  .contenedor-principal {
    /* height: 100%; */
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "menu"
      "encabezado"
      "principal"
      "pie";
  }

  /* .contenedor-ventanas {
    display: grid;
    height: auto;
    grid-template-columns: 100%;
    grid-template-rows: 350px 400px 600px;
    grid-template-areas:
      "enunciado"
      "vista-previa"
      "tabs"
  } */

  /* .area-codigo-html, .area-codigo-html, .cssEditor, .htmlEditor{
    
    height: 500px;
  } */

  .nav {
    position: fixed;
    top: 0px;
    justify-content: space-between;
    z-index: 2;
  }

  .nav-list {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 55px;
    left: 0;
    width: 100%;
    height: 100vh;
    text-align: center;
    padding: 1rem 0;
  }

  .nav-list li {
    margin: 10px 0 0 0;
    padding: 0;
  }

  .nav-btn {
    display: block;
    position: absolute;
    top: 10px;
    right: 0;
    padding: 5px;
    margin: 5px;
    border-radius: 5px;
    cursor: pointer;
  }

  .nav-btn span {
    display: block;
    width: 30px;
    height: 3px;
    margin: 6px 0;
  }

  .nav.open .nav-list {
    display: flex;
  }

  .nav-list li.visibilidad-item {
    display: block;
  }
}