/* Lo que estilo.css no trae: navegación entre pantallas, formularios
   funcionando de verdad y el aviso de los huecos. Sólo variables del
   estilo, nada de color literal. */

header { flex-direction: column; align-items: flex-start; row-gap: 8px; }
nav { flex-wrap: wrap; row-gap: 6px; }
nav a { color: var(--tenue); text-decoration: none; }
nav a.activo { color: var(--acento); font-weight: 600; }

input.campo, textarea.campo, select.campo {
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  appearance: none;
}
textarea.campo { resize: vertical; }

.vacio { color: var(--tenue); font-size: 15px; padding: 18px 2px; }

.nota-hueco {
  margin-top: 14px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--tenue);
  background: var(--sup);
  border: 1px dashed var(--borde);
  border-radius: var(--radio);
}

.categoria {
  color: var(--tenue);
  font-size: 13px;
}

/* .barras normalmente crece con flex:1 dentro de un <main> flex; aquí cuelga
   de un div normal, así que necesita una altura propia para que las barras
   (en % de su alto) se vean. */
.barras { height: 160px; }

@media (min-width: 700px) {
  .hoja { padding: 40px 56px; }
  main { padding-top: 32px; }
  .acciones { margin-top: 34px; }
  header { flex-direction: row; align-items: center; }
}