/* ! Variable de colores */
:root {
  --color-uno: #1e1e1e;
  --color-dos: #f2a900; /* Corporativo */
  --color-tres: #f2a900; /* Corporativo */
  --color-cuatro: #a47811;

  --color-texto-uno: #fff;
  --color-texto-dos: #0c589c; /* Corporativo */
  --color-texto-tres: #094375;
}

body {
  background-color: var(--color-dos);
}

.contenedor-principal {
  font-family: Arial, sans-serif;
  background-color: var(--color-uno);
}

header {
  background: 
  repeating-linear-gradient(
      45deg, 
      var(--color-cuatro) 0, 
      var(--color-cuatro) 1px, 
      transparent 1px, 
      transparent 10px
  ),
  linear-gradient(to left, var(--color-tres) 0%, var(--color-cuatro) 100%);
}

h2 span,
h3 span,
h4 span {
  color: var(--color-texto-tres);
}

.nav {
  background-color: var(--color-dos);
}

.nav-list li a {
  color: #fff;
}

.nav-list li::after {
  background-color: #ff9800;
}

.nav-list li:active::after {
  background-color: #ffeb3b;
}

.tema-oscuro .area-enunciado {
  background-color: #1e1e1e;
  color: #fff;
}

.tema-claro .area-enunciado {
  background-color: #fff;
  color: #000;
}

.area-vista-previa {
  background-color: #fff;
}

.contenedor-tabs {
  background: #1e1e1e;
}

.tabs {
  display: flex;
  padding-left: 10px;
  border-bottom: 1px solid var(--color-dos);
}

.tab {
  color: var(--color-dos);
  background: #000;
  border: 1px solid var(--color-dos);
}

.tema-claro .tab {
  background: #fff;
  border: 1px solid var(--color-dos);
}

.tema-claro .contenedor-tabs {
  background: #fff;
}

.tab.active {
  background: var(--color-dos);
  color: white;
}

.resizer {
  background: var(--color-dos);
}

.titulo-vista-previa,
.titulo-enunciado {
  background-color: var(--color-dos);
}

footer.pie-app {
  background-color: var(--color-dos);
}

@media (width < 900px) {
  .nav-list {
    background-color: var(--color-dos);
  }

  .nav-btn {
    background-color: var(--color-dos);
  }

  .nav-btn span {
    background-color: #fff;
  }
}